Show or hide element in React

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.