Code Quiz

Custom Hook Rules Violation

Spot the rules-of-hooks violation inside a custom hook that conditionally calls useState.

Codejavascript

function useUserData(userId) {
  if (!userId) {
    return null;
  }

  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  return user;
}

function Profile({ userId }) {
  const user = useUserData(userId);
  return <div>{user?.name}</div>;
}

What is the bug in this custom hook?

← PreviousMemoization vs Refs in Custom Hooks Next →Custom Hooks & Rules of Hooks