epic-react-exercises icon indicating copy to clipboard operation
epic-react-exercises copied to clipboard

🏇🏇🏇 Refactor top-level context providers for performance

Open mithi opened this issue 3 years ago • 0 comments

There are currently three top level providers for handling the ui state:

  • theme
  • codeTheme
  • menuState https://github.com/mithi/epic-react-exercises/tree/main/providers

I have to refactor this to best practices so that the app will be faster considering the following techniques:

  1. How to optimize your context value by separating state and dispatch
  • https://kentcdodds.com/blog/how-to-optimize-your-context-value
  1. By using useCallback and useMemo for state update functions https://github.com/kentcdodds/kentcdodds.com/blob/319db97260078ea4c263e75166f05e2cea21ccd1/content/blog/how-to-optimize-your-context-value/index.md

Be sure to measure the performance before and after with chrome dev tools and react component profilers to make sure the changes introduced actually does make things faster... not slower.

mithi avatar Mar 12 '21 11:03 mithi