Menu
As far as my React experience has taken me so far, I have two methods of hiding some rendered HTML from a React components output/render based on props/state:
I wonder which is best practice? I have a hunch that there may be some performance gain by using the CSS method as the browser doesn't need to manipulate the DOM as heavily. Alternatively, it's sometimes nice to have an element completely removed from the DOM.
Any insights?
744
Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them. This example renders a different greeting depending on the value of isLoggedIn prop.
1. Memoization using useMemo() and UseCallback() Hooks. Memoization enables your code to re-render components only if there's a change in the props. With this technique, developers can avoid unnecessary renderings and reduce the computational load in applications.
The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement. When condition evaluates to true, the operator returns “This is True”; otherwise (when condition is falsy) it returns “This is False”.
If you want to hide a component, you can make its render method return null , so there's no need to render an empty, different element as a placeholder.
Conditional Rendering. In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript.
Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.
The best thing about using an Enum object for conditional rendering is that you can make it reusable. Back to the example case, the Alert component is a component in React that usually reusable. So, you can also make it reusable when you want to render it conditionally. You can define the enum in seperate file and export it like this.
Not only can you use props to conditionally apply class names, but you can also use state and other derived values. Have fun having classes automatically added and removed using JavaScript in your React components.
I asked a similar question and received a reply from Sophie Alpert, one of the members of React core team.
Basically in most cases it's better not to render the HTML at all if it should stay that way throughout the lifetime of that page. If frequent toggling is desired, then use CSS to show/hide the element.
180
From performance perspective: react intelligently minimizes DOM re-renders, including special treatment if you change a list of items (e.g. <li> items) in the DOM. And react is really fast. Haven't tested, but I would think any difference in performance would be minimal.
If the component in question is pure HTML, then I generally apply the following rule of thumb between the 2 ways of hiding elements:
NB: For components that hold more than just HTML, e.g. components containing input fields or buttons, or for react components, it is better to let react remove them from the DOM. To let react also nicely clean up possible event listeners etc etc.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
