Instructor Notes
Questions and Help
We highly recommend joining the relevant Slack Channel for this module. In this channel you can ask questions, get advice from previous teachers and discuss lesson content.
For general Syllabus feedback and help you can post in cyf-syllabus
Resources
- Quiz - React Module - 28/04/2019
- Created by London and Ali Smith
Solutions
- PokeDex In-Class - Exercise Solution - 05/06/2020
- Created by London and Ali Smith
- These are now embedded into the syllabus itself, see
demos
folder for source
- Hotel Homework - Solution - 24/07/2020
- Created by Manchester and Dorota Sobkow
Notes for instructors
Updating data when props change
"Lifecycle" of a component
With Hooks, we don't really talk about the "lifecycle" of a component any more, but this section is intended to show exactly what happens at each step in the code.
Walking through the code like this is sometimes called "playing computer". A step-by-step description has been provided in the syllabus, but this was intended as revision material. It is recommended to keep the code example on the screen and walk through each line together with the trainees.
To keep trainees engaged, it can be useful to ask them to predict what the next step does. This also allows you to get feedback on whether a trainee is following or not.
At the end of the "playing computer" ask whether the trainees have spotted the bug in the logic: the effect is not updating when the prop changes. Therefore the key point to emphasize is that useEffect
is not queued when the component re-renders.
ESLint rule for React Hooks
Emphasize that the rule likely knows best, so if it suggests adding a dependency it is recommended to add it.
Interactive Example Index
- State recap
- Data fetching recap
- Effects with prop updates (not working) (used in "playing computer" exercise)
- Effects with prop updates (working)
- Fetch with loading state (on initial load)
- Fetch with loading state (between prop changes)
- Controlled component
- Controlled component with multiple fields
- Object spread operator
- Object spread operator with overrides
- Computed property names