Deep in: Rendered More Hooks Than During the Previous Render

You might encounter this error while working with ReactJS. But when and why does this error occur? In this article, I’ll explain the root causes and explore all scenarios with Real examples to help you understand and resolve this issue effectively.

The error “Rendered more hooks than during the previous render” occurs when the number of hooks (like useState, useEffect, etc.) inside a component changes between renders. This is typically caused by conditional or dynamic usage of hooks, which is not allowed in React. Hooks must always be called in the same order every time the component renders.

Here’s what might be causing the issue and how you can fix it:

1. Conditional Hooks: Ensure that hooks are not being called inside conditional statements. For example, this is problematic:

if (someCondition) {
  const [state, setState] = useState(); // This is not allowed
}

Instead, always call hooks at the top level, outside conditions:

const [state, setState] = useState();
if (someCondition) {
  // Use the state here
}

2. Loops or Dynamic Hooks: Ensure hooks are not being called inside loops or any dynamically evaluated logic. For instance:

someArray.map((item, index) => {
  const [hookState, setHookState] = useState(); // This will break
});

Instead, restructure the logic to avoid dynamically calling hooks.

3. Early Returns(Important): If you have early returns based on conditions, make sure that you are not skipping the hook calls in some renders.

Double-check your component to ensure hooks are consistently called during each render. Let me know if you’d like more specific help with your code!

Important: if you have a nested component that is rendered with a conditional state this error should be accrued. For example, see this code:

function DeliveryCodeWrap({ renderItem, maskId }: DeliveryCodeWrapProps) {
  const { selectedRide } = useActiveRide();
  const terminals = selectedRide?.terminals;
  const hasDeliveryCode = terminals?.find(
    (item) => item?.deliveryVerificationCode,
  );
  const hasDriver = selectedRide?.hasDriver;

  return hasDeliveryCode && maskId && hasDriver
    ? renderItem({
        terminals,
        maskId,
      })
    : null;
}

renderItem is a child/nested Component.

At first glance, this code may seem to work correctly. However, it has an issue: we’ve placed an if condition before renderItem. If the renderItem component is not created and cached properly using useCallback or React.memo before rendering, this error will appear.

Note: So in this situation, you must memorize or directly use component instead of send as props.