Dos and don'ts with react hooks. An opinionated approach

Your React hooks should be readable first, optimized later. Learn an opinionated approach to writing clean, maintainable code that prevents subtle bugs.

#1about 4 minutes

Understanding the internal mechanics of React hooks

Hooks enable state in functional components and are implemented as a linked list, which explains why they must be called in the same order on every render.

#2about 2 minutes

Prioritize code readability over premature performance optimization

Focus on writing clear, future-proof code instead of worrying about minor performance overhead from hooks, as these are rarely the actual application bottleneck.

#3about 2 minutes

Move constants and pure functions outside components

Improve readability and performance by defining constants and pure helper functions outside the component scope, avoiding unnecessary re-creation on each render.

#4about 2 minutes

Declare explicit dependencies instead of inferring them

Always declare direct dependencies in hooks like useEffect and useCallback to prevent subtle bugs when the code is modified later.

#5about 2 minutes

Improve clarity with intermediate variables for derived state

Create meaningful intermediate variables from props or state to represent business logic, making the code more readable and hook dependencies more precise.

#6about 2 minutes

Use useRef for data that shouldn't trigger re-renders

Store values that persist across renders but don't affect the UI, like pagination counters, in a useRef to avoid unnecessary component re-renders.

#7about 1 minute

Stabilize callbacks with the functional setState form

Use the functional update form of setState to compute new state from the previous state, which removes the state variable from dependency arrays and prevents unnecessary re-creations of callbacks.

#8about 1 minute

Calculate derived state directly instead of in useEffect

If a piece of state is calculated from props within a useEffect, it is derived state and should be computed directly during the render to avoid an extra re-render cycle.

#9about 2 minutes

Extract reusable logic into custom hooks

Encapsulate and share repeated component logic, such as handling an Android back button, by creating custom hooks for better maintainability and readability.