> For the complete documentation index, see [llms.txt](https://volunteers.migracode.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://volunteers.migracode.org/coding-course/class-information/teaching-instructions/react/week-2.md).

# 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://volunteers.migracode.org/coding-course/class-information/teaching-instructions/react/week-2.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.