React guidelines
Functional components vs Class components
Functional components should always be used to ensure proper use of the React API. See more about components at Components section.
Profiler
Profiler is used to spot performance issues in components and will give us an overview of the time spent rendering a component and its children. Use Profiler to find out where to optimize and see if memoization is necessary.
Read more about profiler here:
https://react.dev/reference/react/Profiler
Strict Mode
Strict mode should be enabled to quickly spot bugs in development.
Read more about strict mode here:
https://react.dev/reference/react/StrictMode#enabling-strict-mode-for-entire-app
Immutability
No objects or arrays should be mutated or changed directly. Make sure to use map, filter, reduce, slice when working with arrays and always create a new array or object when manipulating data to make sure our state is clean.
If immutability becomes an issue we can install Immer to make sure our state does not get mutated, it also provides an easier or more familiar syntax to most developers.
Read more about Immer here:
https://immerjs.github.io/immer/
Read about Immutability here:
https://developer.mozilla.org/en-US/docs/Glossary/Immutable
State Management
For state management we use what is currently provided from the React Context API.
If we encounter a lot of propdrilling in components and there are components that only pass on props to the next child it can be beneficial to implement a context provider.
If the state is complex and is containing mulitple states that needs to be updated at the same time the hook useReducer is encouraged to use.
Read more about the hook useContext here:
https://react.dev/reference/react/useContext
Read more about the hook useReducer here:
https://react.dev/reference/react/useReducer
React State/Context API
Read more about managing state with the Context API here:
https://react.dev/learn/managing-state
When state gets complex we can start with using reducers and context together before investigating a library to use for state management.
Read more about using useReducer and createContext/useContext together here:
https://react.dev/learn/scaling-up-with-reducer-and-context
Alternatives to be considered in the future
If the context API does not scale well to our applications needs consider using these libraries in the future:
React-redux: https://www.npmjs.com/package/react-redux