State Management Comparison

Local State

When to use it

• simplest way to manage state
• always start with until you find yourself "drilling props" through components
• Simple applications can manage with local state
• Once you have components who's job is simply to pass a prop to another, you could likely benefit from an alternative state management solution

Context

When to use it

• Authentication, Languages, Theme providing

• When you need to pass state to multiple different components, and find yourself "prop drilling" to solve this need

• Benefits/Problems it solves

  • Solves the problem of passing props through many levels of components when intermediate components don't use said props
  • As of React 16.3, Context is production supported
  • Allow for separation of state into different contexts

• Pain Points

  • makes component re-use difficult
  • isn't always the right solution
  • Complex contexts will cause consumers to re-render even when a field gets updated that they do not care about

• Alternative

  • You can pass down whole component rather than individual props to avoid re-rendering of intermediate components that don't use prop

External Libraries

• Event driven state change
• Asynchronus state changes
• Makes it easier to change the structure of your state
• Redux allows you to isolate state away from your components
• Provider is redux is always your higher order component
  • Context you still have to worry about the order of your Provider/Consumer components
• Only re-renders components listening to the parts of state that get changed