Reading-Notes

Reading

Thinking in React

Summarize the five steps of thinking in react.

  1. Break the UI into a component hierarchy
    • Programming
    • CSS
    • Design
  2. Build a static version in React
  3. Find the minimal but complete representation of UI state
    • Does it remain unchanged over time? If so, it isn’t state.
    • Is it passed in from a parent via props? If so, it isn’t state.
    • Can you compute it based on existing state or props in your component? If so, it definitely isn’t state!
  4. Identify where your state should live
    1. Identify every component that renders something based on that state.
    2. Find their closest common parent component—a component above them all in the hierarchy.
    3. Decide where the state should live:
      • Often, you can put the state directly into their common parent.
      • You can also put the state into some component above their common parent.
      • If you can’t find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component.
  5. Add inverse data flow

State: A Component’s Memory

What is one reason a local variable isn’t sufficient for managing a React component?

Local variables have limited scope.

What is the argument to the useState hook, and what are the two parts of its return array?

How can Component A access state from Component B?

Lifting the satate up to a common ancestor and pass it down as props to the components that need access.

Bookmark and Review

Keep these pages handy - they answer questions that show up regularly for this lab.

Passing Props to a Component Rendering Lists State as Snapshot useState hook

Reflection

What are your learning goals after reading and reviewing the class README?

I am excited for hooks, they would have been hugely helpful in our past final project but we weren’t allowed to use them, so I am eager to learn of their power!

This site is open source. Improve this page.