Show or hide element in React

javascript

state-management

conditional-rendering

performance

byNikita Barsukov·Aug 9, 2024

The easiest way to toggle an element in React is to use a combination of the state hook (useState) and the JavaScript logical && operator.

const [show, setShow] = useState(false);

return (
  <>
    {show && <div>Element to toggle</div>}
    <button onClick={() => setShow(!show)}>Toggle Element</button>
  </>
);

Here, show is a boolean held in state. Click the button and it switches show between true and false, deciding the element's visibility.

State and visibility in React

React responds to state changes to manage a component's display. The useState hook provides an easy way to toggle visibility. When the state changes, React automatically re-renders the component. This behavior keeps your UI in sync with data.

To toggle the display of an element, use an inline condition like show && <Element />. It’s more efficient and shorter than a ternary operator returning null when conditions are unmet.

Sometimes, to completely avoid rendering an element, you can also return null:

// Comment: If it doesn't show, does it really exist?
return show ? <div>Your Element</div> : null;

Visibility and dynamic styling

CSS classes or inline styles might be more suitable for toggling visibility, especially when the layout structure matters:

// Comment: Now you see me 👀... Now you don't 🙈
<div style={{ display: show ? 'block' : 'none' }}>
  Your Element Here
</div>

However, beware of possible performance hits. Rendering offscreen elements with display: none might be less overhead than mounting/dismounting components, but for larger DOM trees, conditional rendering might be faster.

Keep it simple, developer

The KISS (Keep it Simple, Stupid) principle applies to toggling visibility as well. Stick to native React patterns like conditional rendering over using external libraries or complex state management.

Be careful with invisible elephants

Hidden elements can carry invisible complexity. Components that are invisible but still have attached event listeners or lifecycle methods can potentially cause havoc. Make sure to deactivate event listeners and stop data fetching for off-stage components.

Knock knock! Who's there? Better user experience

Optimize your components by leveraging React's smart diffing algorithm for updates. If your element visibility depends on user interaction, test frequently to ensure reliable state toggling.

Remember to consider the impact on your app's performance. Hiding elements might eat up more resources than you presume, balance it by optimizing for performance.

explain-codes / Javascript / Show or hide element in React

Linked

How to Make a DIV Visible and Invisible with JavaScript?



How can I update the parent's state in React?



How to hide elements without having them take space on the page?



React js onClick can't pass value to method



Difference between jQuery’s .hide() and setting CSS to display: none

