search

CodeYourFuture / syllabus-archive

[ARCHIVED] Please use https://github.com/CodeYourFuture/syllabus
https://codeyourfuture.github.io/syllabus-master
74 stars 116 forks source link

React week 3: "advanced useEffect" section #417

Closed 40thieves closed 4 years ago

40thieves commented 4 years ago

Replaces class-based lifecycle sections with "advanced useEffect" sections.

Unmounting & cleaning up effects

Returning an unsubscribe function from the effect.

I'm a little unsure if this should be included or moved to stretch goals. I think it might be worth trying, but keeping an eye on the time. If we have time, I think it is worth it.

Updating data when props change

Using the dependencies array to re-run effects when props change.

I decided to frame this by showing a "broken" component first (i.e. one that doesn't update effects in response to props changes). Then "playing computer" to explore why it isn't working, before showing the solution. I think this explains why the solution works nicely. As noted in the mentor notes, although each steps are included in the syllabus, I was intending on just using the CodeSandboxes to actually do the walk-through. The steps are included just for revision purposes.

I also included a small UX optimisation to useEffect, to show a loading state when the effect is re-run after props change. If short on time, I think this could probably be skipped.

For simplicity of review, here's the rendered version of the week 3 lesson.

@LucyMac @anthonytranDev @frosas

40thieves commented 4 years ago

As discussed, I have removed the unmounting/cleaning up effects sections. Merging.