Issue with Conditional Rendering in React Custom Component

Question

I'm facing an issue with conditional rendering in a custom component in my React application. I've been working on creating a custom component for conditional rendering that renders content only when a specific condition is met. Here's the code I have so far

import React from 'react';

function ConditionalRenderComponent({ condition, children }) {
  return (
    <div>
      {condition && children}
    </div>
  );
}

export default ConditionalRenderComponent;

While using this custom component, I noticed that the content passed through the children prop is being accessed and executed even when the condition is false. This behavior is different from when I directly use condition && <div></div> without a custom component, which correctly prevents the content from being accessed when the condition is false.

Here's how I'm using the custom component:

import React, { useState, useEffect } from 'react';
import ConditionalRenderComponent from './ConditionalRenderComponent';

function App() {
  const [userData, setUserData] = useState(null);
  const isLoggedIn = userData !== null;

  useEffect(() => {
    setTimeout(() => {
      setUserData({
        username: 'john_doe',
        email: 'john@example.com'
      });
    }, 1000);
  }, []);

  return (
    <div>
      <h1>Welcome to My App</h1>
      <ConditionalRenderComponent condition={isLoggedIn}>
        <div>
          <p>Hello, {userData.username}!</p>
          <p>Your email: {userData.email}</p>
        </div>
      </ConditionalRenderComponent>
      {!isLoggedIn && <p>Please log in to access user data.</p>}
    </div>
  );
}

export default App;

In the example above, the userData is initially null and later populated with data retrieved from the server. The isLoggedIn condition depends on whether the userData is populated.

However, even when the isLoggedIn condition is false (before the data is fetched), the content inside the ConditionalRenderComponent still tries to access and display the userData. This leads to the error message: "TypeError: Cannot read properties of null (reading 'username')".

Comparison with standard conditional rendering:

Below is a comparison of the behavior using the standard condition && <div></div> approach:

// Standard conditional rendering
{isLoggedIn && (
  <div>
    <p>Hello, {userData.username}!</p>
    <p>Your email: {userData.email}</p>
  </div>
)}

As shown in the above code, using the standard approach correctly prevents accessing the userData values when the condition is false.

I'm not sure why this difference in behavior is occurring when using a custom component with the children prop. I've tried debugging and searching for solutions, but I haven't been able to find a clear answer.

I'd really appreciate any insights or suggestions on why this behavior might be happening and how I can modify the custom component to achieve the expected conditional rendering behavior using the children prop.

Thank you in advance for your help!

Answer 1

I wouldn't recommend creating a component for conditional rendering, but if you want to do it, you can use the render prop pattern so that the function is called only when the condition is true. This prevents the expressions from getting evaluated right away.

function If({ condition, render }) {
  if (!condition) return null;

  return render();
}

export default function App() {
  const [state, setState] = useState(null);

  useEffect(() => {
    wait(1000).then(() => {
      setState({ hello: "world" });
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <If condition={Boolean(state)} render={() => <p>{state.hello}</p>} />
    </div>
  );
}

Answer 2

Why it happens?

So I think the reason it happens is because, in the ConditionalRenderComponent component, the children are passed to it as a property (like arguments to a function). JSX expressions are evaluated as arguments to functions.

This means that even if the condition is false, the children are still evaluated before being passed to the ConditionalRenderComponent function.

Example to understand easily

You are giving a child a PlayStation (in your left hand) and Math paper marks (in your right hand) and saying that if he/she scores more than 90/100, he/she will get the PlayStation.

Since the child already can see the PlayStation in your left hand (passing children as a JSX Expression), he/she already starts using without even checking for the condition.

Now if you close your fist, synonymous to passing the children as a function, he/she can't evalute what is in the left hand before checking if the condition is true in your right hand.

Solution

We modify our custom component by using a function as a child instead of directly rendering the children within the component. This way, you can ensure that the evaluation of the children only happens if the condition is true.

Changes to ConditionalRenderComponent

function ConditionalRenderComponent({ condition, children }) {
  return (
    <div>
      {condition && children()}
    </div>
  );
}

Changes to rendering ConditionalRenderComponent

<ConditionalRenderComponent condition={isLoggedIn}>
        {() => (
          <div>
            <p>Hello, {userData.username}!</p>
            <p>Your email: {userData.email}</p>
          </div>
        )}
</ConditionalRenderComponent>