// On the first render
[ 
  useState() data,  // index 0
  useEffect() data, // index 1
  useState() data   // index 2
]

// A simplified look at what happens inside React

function MyComponent({ showEffect }) {
  const [name, setName] = useState('Alex'); // Hook 1 (index 0)

  if (showEffect) {
    useEffect(() => { ... }); // Hook 2 (index 1)
  }

  const [count, setCount] = useState(0); // This could be Hook 2 or 3!
}

Example: Conditionally fetching data in `useEffect`

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // The hook runs on every render, but the logic inside is conditional.
    if (userId) {
      setIsLoading(true);
      fetch(`/api/users/${userId}`)
        .then(res => res.json())
        .then(data => setUser(data))
        .finally(() => setIsLoading(false));
    } else {
      // Optionally, handle the 'else' case
      setUser(null);
    }
  }, [userId]); // The dependency array ensures this runs only when userId changes.

  if (isLoading) return <p>Loading...</p>;
  if (!user) return <p>Please select a user.</p>;

  return <div>{user.name}</div>;
}

Notice the `if (userId)` check is inside `useEffect`. The hook call itself is at the top level, satisfying React's rules.

2. Use an Early Return (Guard Clause)

If a condition makes the rest of your component's render logic (including other hooks) irrelevant, you can simply return early. This is a clean and highly readable pattern.

When you return `null` or some JSX before other hooks are called, you are effectively creating a conditional render path. The key is that for any given render path, the hook order is still consistent. You're not skipping hooks; you're skipping the entire component render from that point forward.

Example: A component that requires a user object

function UserDashboard({ user }) {
  // Early return if the essential prop is missing.
  if (!user) {
    return <h1>Please log in to view your dashboard.</h1>;
  }

  // These hooks will ONLY be called if 'user' exists.
  // The call order is still consistent for this render path.
  const [settings, setSettings] = useUserSettings(user.id);
  const [notifications, setNotifications] = useNotifications(user.id);

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      {/* Render settings and notifications */}
    </div>
  );
}

3. Lift State Up to a Parent Component

Sometimes the need for a conditional hook is a sign that your state lives in the wrong place. By "lifting state up" to a parent component, you can pass data and functions down as props. The parent can then decide which child components to render, effectively controlling when the hooks inside them are mounted.

This pattern is fundamental to React and helps create more reusable and predictable components.

Example: Managing a modal's open state

// Bad: Child manages its own visibility, leading to conditional hook temptation
function EditProfileModal_Bad() {
  if (!isOpen) return null; // Tempting, but what if isOpen is state here?
  
  // This hook might be called conditionally...
  const [formData, setFormData] = useState({}); 
  // ... 
}

// Good: Parent component manages visibility
function ProfilePage() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Edit Profile</button>
      
      {/* The component with the hooks is only rendered when needed */}
      {isModalOpen && <EditProfileModal onClose={() => setIsModalOpen(false)} />}
    </div>
  );
}

function EditProfileModal({ onClose }) {
  // Now these hooks are always called when EditProfileModal is rendered.
  // No conditional logic needed at the top level.
  const [user, setUser] = useCurrentUser();
  const [formState, setFormState] = useState(user);

  useEffect(() => {
    // Logic to handle escape key to close modal
    // ...
  });

  return ( /* Modal JSX */ );
}

4. Abstract the Logic into a Custom Hook

For more complex or reusable conditional logic, a custom hook is the perfect solution. A custom hook can take your condition as an argument and internally use the patterns we've already discussed (like putting logic inside `useEffect`).

This cleans up your component code and makes the logic reusable across your application.

Example: A custom hook for conditional fetching

// The custom hook
function useConditionalFetch(url, condition) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (condition) {
      setIsLoading(true);
      fetch(url)
        .then(res => res.json())
        .then(setData)
        .finally(() => setIsLoading(false));
    } else {
      setData(null);
    }
  }, [url, condition]);

  return { data, isLoading };
}

// The component using the custom hook
function ProductDetails({ productId }) {
  // The custom hook is called unconditionally.
  // The '!!productId' condition is passed as an argument.
  const { data: product, isLoading } = useConditionalFetch(
    `/api/products/${productId}`,
    !!productId
  );

  if (isLoading) return <p>Loading...</p>;

  return (
    <div>
      {product ? <h2>{product.name}</h2> : <p>Select a product</p>}
    </div>
  );
}

5. Pass a `disabled` or Null Option to the Hook

This is a more advanced pattern, often seen in data-fetching libraries like React Query or Apollo Client. The hook itself is designed to be disabled via an option. It's still called on every render, but it does nothing if the `enabled: false` option is passed.

This is essentially a formalized version of "logic inside the hook," but it's provided by the hook's author, making for a very clean API.

Example: Using a disabled flag with a library like React Query

import { useQuery } from 'react-query';

function fetchTodos(userId) {
  return fetch(`/api/todos/${userId}`).then(res => res.json());
}

function UserTodos({ userId }) {
  // useQuery is always called.
  // The query will not run if the `enabled` option is false.
  const { data, status } = useQuery(
    ['todos', userId],
    () => fetchTodos(userId),
    { enabled: !!userId } // The magic is here!
  );

  if (status === 'loading') return <p>Loading...</p>;
  if (status === 'error') return <p>Error fetching data</p>;

  return (
    <ul>
      {userId ? 
        data?.map(todo => <li key={todo.id}>{todo.title}</li>) :
        <li>Please select a user to see their todos.</li>
      }
    </ul>
  );
}

Conclusion: Embrace the Rules for Cleaner Code

The Rules of Hooks aren't there to make your life harder. They enforce a contract that allows React to be performant and predictable. Instead of fighting them, we can embrace them by using smarter patterns.

To recap, the next time you're tempted to write `if (condition) { useSomething() }`, pause and consider these alternatives:

• Logic Inside: Can you move the `if` statement inside your hook?
• Early Return: Can you return `null` or JSX before the hook is even reached?
• Lift State: Should a parent component be deciding whether this component even renders?
• Custom Hook: Is this logic complex or reusable enough to be extracted?
• Disabled Flag: Does the hook you're using support an `enabled: false` or similar option?

By internalizing these five patterns, you'll not only avoid linter errors but also write cleaner, more maintainable, and more robust React applications for 2025 and beyond.