react-rules

1. Use as little React as possible

• Keep components small - less than 100 lines
• Views reference components
• Remove as much logic as possible from components and views
• Externalize functions rather and keep external functions vanilla typescript
• Vanilla typescript is easier to test, and package for other uses

2. Avoid using useEffect

• Avoid using useEffect to fetch data or initialise state
• Use hooks, tanstack query, or the new use feature in react 19
• use useEffect to update state when something else changes

3. Use useState sparingly

• Using a local variable is often more optimal - even if something has to be calculated
• useState uses reducers under the hood
• If you have more than 3 useStates you might as well use reducers

4. Use React.FC and expand props

• Expand props so that each parameter is named
• It's easier to know which props are not used

5. Avoid globals and global state

• Globals including auth globals, often lead to race conditions
• Global state is only useful in rare cases. SPAs with signifant complexity
• Start with reducers which are passed through props
• If that's too complicated, use React context
• As a last resort for very complicated SPAs - use zustand

6. Use reducers

• Reducers are great - read up on them and understand them
• They keep all state update logic in one place
• They are vanilla typescript - keep them that way
• Use them to update state based on other state.
• Note that updating any part of the state returned from a reducer will cause a re-render if the whole state is a parameter - you can pass just parts of it

7. Avoid passing style to components

• Avoid passing styles to components, or styling your components in views
• Create components that are pre-styled
• Create variants - e.g. small, medium, large - rather than size={18}
• Avoid using styles in views as much as possible

8. Use the theme

• Create constants for your theme or use a consistent structure
• Use the theme fonts and colors
• Avoid naming fonts and inluding color values directly in views and components