Stop using “return null” in React

When working with React, it’s important to understand the implications of the values returned from components. While it may be tempting to use return null to indicate that a component should not render anything, this can actually have unintended consequences. In this post, we'll explore why using return null from React components is considered bad practice and why return false is a better alternative.

The Problem with “return null"

The primary issue with using return null in a component is that it can cause unexpected behavior in the application. Specifically, null is treated by React as a valid value to render, and it can cause the component's children to become disconnected from the tree. This can result in a variety of issues, such as unexpected re-renders or state inconsistencies.

To understand why this happens, it’s helpful to know a bit about how React works under the hood. When a component is rendered, React creates a virtual DOM tree that represents the current state of the UI. This tree is then compared to the previous tree to determine which parts of the UI need to be updated. If a component returns null, it effectively tells React that it doesn't need to render anything at all. However, this can cause problems when the component's children have state or props that need to be updated.

Consider the following example:

function Parent() {
  return (
    <div>
      <Child />
    </div>
  );
}

function Child() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Child rendered');
  });

  if (count === 0) {
    return null;
  }

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

In this example, the Child component uses return null to indicate that it should not render anything if count is equal to 0. However, this can cause problems if the Child component is ever rerendered with a non-zero value of count. In this case, React will need to reconnect the Child component to the tree, which can cause unexpected behaviour.

The Benefits of "return false"

Instead of using return null, a better approach is to use return false. When a component returns false, React treats it as if it had returned null, but it also tells React not to render any of the component's children. This ensures that the component and its children remain connected to the tree, avoiding the issues that can arise from using return null.

Here’s an updated version of the previous example that uses return false instead:

function Parent() {
  return (
    <div>
      <Child />
    </div>
  );
}

function Child() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Child rendered');
  });

  if (count === 0) {
    return false;
  }

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

In this version, the Child component returns false instead of null when count is equal to 0. This ensures that the component and its children remain connected to the tree, even when the component doesn't need to render anything. As a result, the component will behave more predictably and avoid the issues that can arise from using return null.

When to Use “return false"

While using return false instead of return null is generally considered better practice, it's important to note that there are cases where it may not be appropriate. Specifically, return false should only be used when a component needs to indicate that it should not render anything. If a component needs to render something conditionally, it should use conditional rendering techniques such as if statements or ternary operators.

Here’s an example of conditional rendering using an if statement:

function MyComponent({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <LoginForm />;
  }

  return <Dashboard />;
}

In this example, the MyComponent component uses an if statement to conditionally render either a LoginForm or a Dashboard, depending on whether the user is logged in. This is a more appropriate use of conditional rendering than using return false in the tree.

Conclusion

In conclusion, using return null from React components can cause unexpected behaviour and should generally be avoided. Instead, components should use return false when they need to indicate that they should not render anything. By doing so, the component and its children will remain connected to the tree, avoiding the issues that can arise from using return null.

However, it's important to note that return false should only be used when a component needs to indicate that it should not render anything, and conditional rendering techniques should be used for cases where a component needs to render something conditionally.