state-management.md

State Management

Tools

• Redux, Redux Toolkit
• React Hooks (useState, useReducer)

Best Practices

• On dynamic pages the url is the source of truth - use the router when needed.
• We prefer to use local state initially for component level state management.
• We want to lift state up the component tree as needed.
  • Use local context to avoid prop drilling. Put context as high in the component tree as needed.
  • Try not to default to always adding state to the Redux store. Use Redux only when sharing state across multiple places in the app. You can read more about the differences between Context vs Redux here.
    • We use createSlice from Redux Toolkit to create the actions and reducers.
    • We use createAsyncThunk for async calls.
    • Everything in Redux should be serializable. If there is anything that is stored inside of Redux that cannot be serialized it should not live inside of Redux (ie, BigNumber).
  • We use React Hook Form for form state management.

Note: If you have questions about any of these practices, please reach out to the core development team.