React Structure

Use JS to handle complex logic and state, not JSX.#

refactoring to JSX will always make the rendering logic much easier to understand.

Components should simplify as they spread out from the app's root.#

Components at the bottom of the component heirarchy render much more than the component or contexts at the top. Every time a component re-renders, a function must be redefined.

Prefer many small and stateless components to React behemoths#

  • State is easier to track and debug in smaller components
  • Less side effects
  • Smaller scope, less naming collisions
  • Much, much easier to read and understand.

Scope state only to where it needs to be used.#

useState is meant for separating concerns.#

Avoid this:

const [bigState, setBigState] = useState({
birds: ["Crow", "Sparrow", "Ostrich"],
likesIceCream: true,
});

Use this:

const [birds, setBirds] = useState(["Crow", "Sparrow", "Ostrich"]);
const [likesIceCream, setLikeIceCream] = useState(true);

Lazy load independent branches of the app (Once updated).#

Error boundaries should become the norm. (Once updated).#

Use context when state is required over multiple views or pages. Scope minimally.#

If initializing useState with a deliberate falsy value, use null instead of undefined.#

See related rule in JS rules section