2 - Reacting to changes

Notes for Instructors

Function references vs function calls is a very common source of confusion
- It is worth recapping again to ensure that students really do understand it
Passing event handler function references
- The concept trips up a lot of students - will try to immediately call the function when passing to an event handler e.g. onClick={this.foo()}
Passing functions as props
- This concept isn't really that much different from the section above, but passing across components does often confuse students

The goal of this section is to demonstrate React re-rendering but without using state
- i.e. showing that React will call component functions again to get updated JSX after props/state changes
- Teaching separately allows us to emphasise that setting state has 2 jobs: updating the state and triggering React to re-render
- It is also convenient to (briefly) discuss how the virtual DOM is efficient
Re-rendering demo
- Focus on the Counter component primarily, in particular the console.log
- The code in index.js is just a way of forcing a re-render without using state. But we don't really want students to learn the bad habits here (we want them to ultimately learn state), so they are hidden away.

This section takes a bit of a risk - it deliberately shows the wrong way trying to do state, then refactors to fix it
Before fixing the problem, something to emphasise is the moment when we start using the virtual DOM for the first time
- When we trigger a manual re-render to ReactDOM.render()
- But we are updating the DOM here - we mentioned in lesson 1 that this was hard, and now we've got an easy way of updating it. This is the true power of React
We cover the problems with using a global variable, so hopefully that is enough to prevent the students copy/pasting the wrong way
- Ensure that you emphasise this is the wrong way to do state
Demonstrate the app with multiple counters
- Shows that each components remembers their own state separate to other components
When to use props or state?
- My rule of thumb: use props until you need it to change over time, then switch to state

Last updated 4 years ago

Was this helpful?

Notes for Instructors

Handling Events

Function references vs function calls is a very common source of confusion

Passing event handler function references

The concept trips up a lot of students - will try to immediately call the function when passing to an event handler e.g. onClick={this.foo()}

Passing functions as props

This concept isn't really that much different from the section above, but passing across components does often confuse students

Re-Rendering Components

The goal of this section is to demonstrate React re-rendering but without using state

i.e. showing that React will call component functions again to get updated JSX after props/state changes
Teaching separately allows us to emphasise that setting state has 2 jobs: updating the state and triggering React to re-render
It is also convenient to (briefly) discuss how the virtual DOM is efficient

Re-rendering demo

Focus on the Counter component primarily, in particular the console.log
The code in index.js is just a way of forcing a re-render without using state. But we don't really want students to learn the bad habits here (we want them to ultimately learn state), so they are hidden away.

State

This section takes a bit of a risk - it deliberately shows the wrong way trying to do state, then refactors to fix it

Before fixing the problem, something to emphasise is the moment when we start using the virtual DOM for the first time

When we trigger a manual re-render to ReactDOM.render()
But we are updating the DOM here - we mentioned in lesson 1 that this was hard, and now we've got an easy way of updating it. This is the true power of React

We cover the problems with using a global variable, so hopefully that is enough to prevent the students copy/pasting the wrong way

Demonstrate the app with multiple counters

Shows that each components remembers their own state separate to other components

When to use props or state?

My rule of thumb: use props until you need it to change over time, then switch to state