React Design Patterns 01- Conditional Rendering

Complexity level: Intermediate

After months of dedication, I’m thrilled to kick off our weekly series on React Design Patterns! 🎉 This series is crafted to help you elevate your React skills, build scalable components, and discover those frontend hidden gems that make a real difference in your projects. We’ll be exploring each concept through interactive lessons in Storybook, followed by hands-on exercises rooted in real-world examples. ⚛️

If you’re already familiar with React and ready to level up, you’re in the right place. And don’t worry — if there are any gaps in your knowledge, we’ll make sure they’re filled in along the way.

Getting started

If you wish to follow along and do the exercise along with this course follow: https://react-design-patterns-workshop.vercel.app/storybook?path=/docs/lessons-01-conditional-rendering-pattern-01-lesson--docs

git clone git@github.com:code-mattclaffey/react-design-patterns.git
git clone https://github.com/code-mattclaffey/react-design-patterns.git
npm i 
npm run storybook

Conditional Rendering

Conditional rendering youtube video

Let’s start with an essential pattern: Conditional Rendering. This pattern allows you to dynamically alter the UI based on the current state or props of your component.

The most straightforward way to implement conditional rendering is by using an if statement:

const Component = (props) => {
  if (props.isAuthenticated) {
    return <h1>Welcome {props.username}!</h1>;
  } else {
    return <h1>Not logged in.</h1>;
  }
};

Alternatively, you can achieve the same result with a ternary operator, which is often more concise:

const Component = (props) => {
  return props.isAuthenticated ? (
    <h1>Welcome {props.username}!</h1>
  ) : (
    <h1>Not logged in.</h1>
  );
};

Another option is using the && syntax, which only renders the component if the condition is true:

const Component = (props) => {
  return props.isAuthenticated && <h1>Welcome {props.username}!</h1>;
};

Conditionally Rendering a Component

When dealing with components that involve complex calculations or heavy processing, it’s wise to conditionally render them from the parent component. This can significantly improve your app’s performance:

const ComponentOne = (props) => {
  return <h1>Welcome {props.username}</h1>;
};

const ComponentTwo = (props) => {
  return (
    <header>
      {/* Other components */}
      {props.isAuthenticated && <ComponentOne username="JohnDoe" />}
    </header>
  );
};

Implementing this correctly can be a huge win for your JavaScript execution times.

Event-Driven Rendering

There are scenarios where you’ll want to render a component in response to an event. Here’s an example where a box is conditionally rendered based on the state triggered by a button click:

const Component = () => {
  const [displayBox, setDisplayBox] = useState(false);

  const showBox = () => {
    setDisplayBox(true);
  };

  const hideBox = () => {
    setDisplayBox(false);
  };

  return (
    <>
      <button type="button" onClick={displayBox ? hideBox : showBox}>
        Toggle Box
      </button>
      {displayBox && (
        <div>
          <p>Box</p>
        </div>
      )}
    </>
  );
};

Conclusion

In this first part of our series, we explored the Conditional Rendering pattern in React, covering different approaches like if statements, ternary operators, and && syntax. We also discussed best practices for conditionally rendering components to optimize performance and how to handle event-driven rendering.

This pattern is fundamental, yet powerful, setting the stage for more advanced patterns we’ll explore in upcoming posts.