React #Redux

What Is Cross-Component / App-Wide State?

• Local State
  • State that belongs to a single component
  • E.g. listening to user input in a input field; toggling a "show more" details  field
  • Should be managed component-internal with useState() / useReduce()
• Cross-Component State
  • State that affects multiple components
  • E.g. open/ closed state of a modal overlay
  • Requires "props chains" / "prop drilling"
• App-Wide State
  • State that affects the entire app (most/ all components)
  • E.g. user authentication status
  • Requires "props chains" / "prop drilling"

 

React Context - Potential Disadvantages

1. Complex Setup / Management
   1. In more complex apps, managing React Context can lead to deeply nested JSX code and / or huge "Context Provider" components
2. Performance
   
   1. React Context is not optimized for high-frequency state changes
   2. https://github.com/facebook/react/issues/14110#issuecomment-448074060

 

 

What is "Redux"?

A state manament system for cross-component or app-wide state

 

Core Redux Concepts

1. Redux is all about having one Central Data(State) Store