It should be easy to understand the rendering logic of a React Component. Can someone understand your Component after five minutes of reading it? If not, then it needs to be refactored.
Page components, routers, and contexts are naturally larger, as they generally hold the majority of the complicated application logic
Goal: We should try to cap component length between 200-300 lines.
- Non stateful components can be in the same file if they are used exclusively by their parent component
When setting state based on a previous value, use functional updates to ensure values that are up to date.
Doing so ensures that the state is never stale and always updates based on the previous value.
Read more about functional updates in the React Docs