Skip to main content

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



Notes for Mentors

Handling Events

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

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 trainees 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
    • The demo is not very impressive, so it's easy for the trainees to miss
  • We cover the problems with using a global variable, so hopefully that is enough to prevent the trainees 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
  • Container components
    • To be honest I kept this in here as a hold over from previous lessons
    • Arguably it's less relevant recently in React
    • If you're short on time then it can be skipped

Interactive Example Index

Exercise solutions