TheOdinProject / top-meta

TOP hub for ongoing support and improvement of the curriculum by the maintainers
32 stars 10 forks source link

Section: More React Concepts #201

Closed 01zulfi closed 1 year ago

01zulfi commented 2 years ago

More React Concepts

Section Summary

  1. Describe that managing and passing around data and state becomes repetitive in larger applications. Explain the prop drilling pattern that occurs. Introduce the Context API as a way to pass state and data deep into React components. Walkthrough an example of incorporating Context in an application.
  2. Similarly, state logic is hard to track in larger applications. Reducer functions are a way to alleviate that. Walkthrough an example of incorporating reducers in an application. Mention redux as a solution.
  3. Build upon the “How To Deal With Side Effects” lesson in “State And Effects” lesson. Explain when to use useEffect and when it might be redundant. Explore the behaviour of useEffect in Reacts’ Strict mode.
  4. List out all the hooks for brevity. Give use-cases of some of the more useful ones e.g. useRef, useMemo, useCallback. 5. Explain how to write a custom hook and remind learners of the rules of hooks.

Section Lessons

  1. Managing State With The Context API
  2. “Reducing” State
  3. Deep Dive Into Effects
  4. More Hooks And Writing Custom Hooks
  5. Project: Messaging Application
robocopyZer0 commented 2 years ago

I like this.

What do you think about also incorperating a part on protected routes? Could go well with writing custom hooks.

01zulfi commented 2 years ago

Protected routes slipped my mind. I'd be down for a section on them. I think protected routes would be a better fit for the React Router lesson in the new React Ecosystem section.

thatblindgeye commented 2 years ago

Unless I'm misreading the intent, when to use useEffect shouldn't be covered this late. That's something that should be covered whenever useEffect is first introduced, preferably before the section on class components since the connection between useEffect and lifecycle methods could be good for users to learn. I'm not sure if we need an entire lesson on a deep dive into effects, but it might depend what would actually be included.

Otherwise for the "More Hooks And Writing Custom Hooks" lesson, we should be sure to not re-write documentation (not just explain what the hook does, but be sure we can provide content beyond what just reading the documentation can provide), and to not provide content for the sake of it (I don't think we need to cover every hook, just ones users may be able to make use out of in the project the user does next).

01zulfi commented 2 years ago

Unless I'm misreading the intent, when to use useEffect shouldn't be covered this late. That's something that should be covered whenever useEffect is first introduced, preferably before the section on class components since the connection between useEffect and lifecycle methods could be good for users to learn. I'm not sure if we need an entire lesson on a deep dive into effects, but it might depend what would actually be included.

Agreed. useEffect (and all the information surrounding it) should be covered in the States And Effects section. I'll hold off on a deep dive lesson.

Otherwise for the "More Hooks And Writing Custom Hooks" lesson, we should be sure to not re-write documentation (not just explain what the hook does, but be sure we can provide content beyond what just reading the documentation can provide), and to not provide content for the sake of it (I don't think we need to cover every hook, just ones users may be able to make use out of in the project the user does next).

Somewhat agreed. I think there's value in covering refs and memoization even if user doesn't find a use case in their projects, but "writing custom hooks" could be removed entirely. Custom hooks will eventually be covered:

  1. In the React Router lesson when we cover protected routes (if we even want to cover that)
  2. In the Context API lesson of this section (depending on how we cover it)