Exploring the challenges of conditional rendering in React custom components

Question

I'm having 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 only renders content when certain conditions are met. Here is my current code:

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 attribute even when condition is false Also accessed and executed. This is different from the behavior of using condition &&

directly without a custom component, where the condition is false Access to the content is properly blocked.

Here's how I use custom components:

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, userData is initially null and is later populated with data retrieved from the server. The isLoggedIn condition depends on whether userData is populated.

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

Comparison to standard conditional rendering:

Here is a comparison of behavior using the standard condition &&

approach:

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

As shown in the code above, using standard methods correctly prevents access to the value of userData when the condition is false.

I'm not sure why this difference in behavior occurs when using a custom component with the children attribute. I've tried debugging and looking for solutions but I haven't found a clear answer yet.

Any insights or suggestions as to why this might be happening and how to modify the custom component to achieve the expected conditional rendering behavior for the children attribute would be greatly appreciated.

Thanks in advance for your help!

Answer 1

Why does this happen?

So I think the reason this is happening is that, in the ConditionalRenderComponent component, the child elements are passed to it as properties (just like arguments to a function). JSX expressions are evaluated as arguments to functions.

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

Easy to understand examples

You give a child a PlayStation (on your left hand) and a math paper score (on your right hand) and say that if his/her score is over 90 /100, he/she will get a PlayStation.

Since the child can already see the PlayStation in your left hand (pass children as a JSX expression), he/she has already started using it before the condition is checked.

Now, if you clench your fist, it's equivalent to passing children as a function, and he/she can't evaluate what's in your left hand before checking whether the condition in your right hand is true.

solution

We modify our custom component by using a function as a child element instead of rendering children directly in the component. This way you ensure that children is only evaluated if condition is true.

Changes to ConditionalRenderComponent

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

Changes to rendering ConditionalRenderComponent

<ConditionalRenderComponent condition={isLoggedIn}>
        {() => (
          <div>
            <p>你好，{userData.username}！</p>
            <p>你的电子邮件：{userData.email}</p>
          </div>
        )}
</ConditionalRenderComponent>

Answer 2

I don't recommend creating a component for conditional rendering, but if you want to do so, you can use the render properties pattern so that the function is only called when the condition is true. This prevents the expression from being evaluated immediately.

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>
  );
}