React Hooks

• useState accepts a callback function that performs lazy state initialization.

  • In other words, React will only invoke that callback the first time that the component renders in order to get the initial state one time.

  • In contrast, by default, when you pass initial state, React will evaluate the initial state on every render. This evaluation can be wasteful if the initial state is computationally expensive (e.g. getting a value from local storage).

• One compelling reason to colocate state—keep state in the component it's being used in instead of in a parent—is that state changes don't cause re-renders for the parent. This is a performance gain and so generally a good idea.

• Derived state is state that is calculated based on other state.

• When you're performing a lot of setState in a row, React is usually smart enough to group them into batches, so your state updates only trigger one re-render.

  • However, sometimes React can't do batch your state updates (like with async work), so you can get nasty bugs where a re-render doesn't have the data you expect.

  • To solve this, consider storing your state into 1 object: e.g. { status, blogPost } instead of status and blogPost.

  • Similarly, reducers solve the problem in the same way.

Useful Diagram for React Hooks Flow