Conditional Rendering With React Hider

“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.” — React’s official documentation

What Is Conditional Rendering?

When you work with React, sometimes you need to show or hide a component’s content. For example, when you load a website like Medium, Twitter, or Airbnb, you see a skeleton instead of content. Or maybe you’ve seen a loader animation before a component is loaded. That’s because the website needs to load, fetch, or request any resource, and it’s showing you this skeleton or animation representing a loading status in the meantime.

This is the most common example, but conditional rendering is really helpful when you need to hide or show content that needs to be unlocked after any event or side effect. Conditional rendering is also helpful if you need to show a loader before any component finishes their fetching/requesting process or you want to pull out elements inside the view without re-rerendering the entire window or modifying a complex state.

OK, but My Code Looks Weird and Verbose Now

When you implement this feature inside a component, you find different ways to accomplish that. The first one is using if/else statements using a boolean value to decide what should be rendered or not, but sometimes this is not a really good solution because the conditional statements could re-render the entire component. If this is connected to a lifecycle method, you could find this implementation not very beneficial. Another problem is that even if you don’t wrap your UI elements inside an individual component, this generates less readable components thanks to the use of curly braces, the conditional &&operator, or even the inline if/else statement syntax (the conditional ternary operator). That’s the reason why I created React Hider.

React Hider in a Nutshell

React Hider is a minimalist library that can be used to make conditional rendering simpler and code cleaner. Thanks to just one component that does the conditional rendering for you, it increases productivity and saves time spent reading or creating code. Getting started is quite simple. Just install the library through NPM:

Import the Hider inside any pre-configured React project you want:

And using the component is simple as well. First, set an initial boolean state depending on your component’s requirements:

Now it’s time to use the Hider component to wrap the components that you need to show/hide. The first one needs to be the component to show and the second one the component to hide. After that, just provide the actual boolean status declared before to the state prop inside Hider:

I need to say that this library is capable of showing/hiding a single child component because Hider is based on React’s conditional && operator too. You just need to worry about which elements need to be rendered or not.

You’re Done!

And that’s everything you need to know to use React Hider inside any future project, Thanks for reading and feel free to contribute.