TIL-20220816

회고

Re

Re

Repetition.

React

• 🌏🛰️🛰️🛰️Passing Data Deeply with Context
  • (Oveview) Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the same information. Context lets the parent component make some information available to any component in the tree below it - no matter how deep - without passing it explictly through props.
  • You will learn
    • What "prop drilling" is
    • How to replace repetitive prop passing with context
    • Common use cases for context
    • Common alternatives to context
  • TOC
    • The problem with passing props
    • Context: an alternative to passing props
      • Step 1: Create the context
      • Step 2: Use the context
      • Step 3: Provide the context
    • Using and providing context from the same component
    • Context passes through intermediate components
    • Before you use context
    • Use cases for context
  • Recap
    • Context lets a component provide some information to the entire tree below it.
    • To pass context:
      1. Create and export it with export const MyContext = createContext(defaultValue).
      2. Pass it to useContext(MyContext) Hook to read it in any child component, no matter how deep.
      3. Wrap children into <MyContext.Provider value={...}> to provide it from a prent.
    • Context passes through any components in the middle.
    • Context lets you write components that "adapt to their surroundings."
    • Before you use context, try passing props or passing JSX as children.

• 📡📡📡🪐 Scaling Up with Reducer and Context
  • (Overview) Reducers let you consolidate a component's state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
  • You will learn
    • How to combine a reducer with context
    • How to avoid passing state and dispatch through props
    • How to keep context and state logic in a separate file
  • TOC
    • Combining a reducer with context
      • Step 1: Create the context
      • Step 2: Put state and dispatch into context
      • Step 3: Use context anywhere in the tree
    • Moving all wiring into a single file
  • Recap
    • You can combine reducer with context to let any component read and update state above it.
    • To provide state and the dispatch function to components below:
      1. Create two contexts (for state and for dispatch functions).
      2. Provide both contexts from the component that uses the reducer.
      3. Use either context from components that need to read them.
    • You can further declutter the components by moving all wiring into one file.
      • You can export a component like TasksProvider that provides context.
      • You can also export custom Hooks like useTasks, useTasksDispatch to read it.
    • You can have many context-reducer pairs like this in your app.