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.
Checkout more articles on ReactJS
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import React from 'react'; const tab = (showTab) => { // prevent component from rendering if (!showTab) { return null; } return <div style={{ marginTop: 10 }}> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> } export default tab; |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import React, { useState } from 'react'; import tab from './Tab'; const App = () => { const [showTab, setShowTab] = useState(true); // handle click event of the toggle button const handleToggle = () => { setShowTab(preState => !preState); } return ( <div className="App"> <div style={{ marginBottom: 10 }}><a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></div> <input type="button" value="Toggle Tab" onClick={handleToggle}></input> {tab(showTab)} </div> ); } export default App; |
Output:
That’s it for today.
Thank you for reading. Happy Coding!
