Prevent Component from Rendering in ReactJS

Today we will show you how to prevent component from rendering in ReactJS. When you want to prevent the component from rendering based on some condition then you can simply return the null value.

Prevent Component from Rendering in ReactJS, How to prevent a rerender in React JS, Avoiding Unnecessary Renders in React, react prevent child component from rendering, react functional component prevent re-render, prevent rerender react hooks.

Example of Prevent Component from Rendering

Let’s take an example where we will use toggle button to show hide the tab based on the button click.

First, create functional component to render the tab content. Here we will prevent component from rendering based on the condition.

Tab.js

Now it’s time to call the tab component from the parent component and pass the toggle flag so based on it we can prevent component.

App.js

Output:

Output - Prevent Component from Rendering in ReactJS - Clue Mediator
Output – Prevent Component from Rendering in ReactJS – Clue Mediator

That’s it for today.

Thank you for reading. Happy Coding!

Demo & Source Code

Github Repository StackBlitz Project

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *