# 2 - Reacting to changes

## Notes for Instructors

#### Handling Events

* 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

#### 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
  * 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

## Homework Suggestion

{% hint style="info" %}
Remember copy the Homework to the [Trello ](https://trello.com/b/wl6LgDXD/homework-overview)at the end of the class
{% endhint %}

1. If unfinished, complete the in-class exercises on your `pokedex` app
2. Complete all of the lesson 2 of [cyf-hotel-react](https://github.com/Migracode-Barcelona/cyf-hotel-react) project

## Practice Day (Saturday) <a href="#practice-day-saturday" id="practice-day-saturday"></a>

Live coding session with students to go over [cyf-hotel-react](https://github.com/Migracode-Barcelona/cyf-hotel-react) project lession 2 steps and Q\&A session to clear their doubts.

## Feedback

{% hint style="info" %}
We can always improve thanks to your feedback, you can use this document to send your ideas or suggestions on every week. \
This [document ](https://docs.google.com/document/d/1AzqbpWri4cyeqqf8TVHIovfdRYWOdONsYU01LVvdPvI)will help us to improve Syllabus and this guide
{% endhint %}