LogoLogo
Class SchedulesOfficial WebsiteMigraCode SyllabusHow to teach tech
  • 👩‍đŸĢWelcome to the MigraCode Volunteer Guide
  • General information
    • â„šī¸About MigraCode
    • đŸ–ąī¸Working with our students
    • đŸ‘ĨVolunteering roles
      • Teaching volunteer roles
      • Mentoring volunteer roles
      • Slack volunteer roles
  • Teaching instructions
    • đŸ–Ĩī¸Basic computer literacy
      • Lesson 1: Introduction and Browser
      • Lesson 2: More browsing and Internet
      • Lesson 3: Mail and a taste of Drive
      • Lesson 4: Google Docs
      • Lesson 5: Google sheets
      • Lesson 6: Google slides
    • 👩‍đŸ’ģWeb development
      • Class Example
      • Teaching instructions
        • Introduction
          • 1 - Terminal and Visual Code
          • 2 - Git and Github
        • HTML/CSS
          • 1 - Semantic HTML and CSS
          • 2 - Responsive Web and layout
          • 3 - Bootstrap
        • JavaScript I
          • 1 - Hello Javascript
          • 2 - Expressions and loops
          • 3 - Arrays and callbacks
        • Javascript II
          • 1 - Javascript in the browser
          • 2 - Objects
          • 3 - Introduction to APIs
        • Javascript III
          • 1 - HTTP Protocols and ES6
          • 2 - Workshop Part 1
          • 3 - Workshop Part 2
        • React
          • 1 - Hello React
          • 2 - Reacting to changes
          • 3 - Fetching Data
        • NodeJS
          • 1 - Node and Express 101
          • 2 - APIs in Node
          • 3 - Workshop
        • Databases
          • 1 - Introduction to SQL
          • 2 - SQL with Node
          • 3 - CRUD with SQL and Node
    • đŸ› ī¸Professional Skills
      • Module 1: Soft skills
      • Module 2: Employability
      • Module 3: Working in projects
  • Useful Links
  • Class Schedules
  • Official Website
  • MigraCode Syllabus
  • How to teach tech
Powered by GitBook
On this page
  • Notes for Instructors
  • Homework Suggestion
  • Practice Day (Saturday)
  • Feedback

Was this helpful?

Export as PDF
  1. Teaching instructions
  2. Web development
  3. Teaching instructions
  4. React

3 - Fetching Data

Previous2 - Reacting to changesNextNodeJS

Last updated 4 years ago

Was this helpful?

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 students.

To keep students 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 students 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.

Homework Suggestion

Remember copy the Homework to the at the end of the class

  1. If you haven't already, complete the in-class exercises on your pokedex app

  2. Complete all of the lesson 3 of project

  3. Try to complete the in the cyf-hotel-react homework

Practice Day (Saturday)

Feedback

Live coding session with students to go over project lession 3 steps and Q&A session to clear their doubts.

We can always improve thanks to your feedback, you can use this document to send your ideas or suggestions on every week. This will help us to improve Syllabus and this guide

👩‍đŸ’ģ
Trello
cyf-hotel-react
Stretch Goal exercises
cyf-hotel-react
document