How to load components conditionally in React JS

React JS is a popular library for making attractive and interactive user interfaces. Components in React JS refer to separate files for each building block of the application interface. They are a key feature of React JS that help to improve the usability of modules and create complex UI designs.

Conditional loading is the capability to render the components on the interface according to the user's needs to improve interface interactivity. We load components conditionally in React js applications using two different ways.

1. Conditional loading using useState

2. Conditional loading using if/else

Concept

In this scenario, we are conditionally loading two components, Image.js and Description.js , to the Gallery made in App.js.

The initial interface of the application contains two buttons: View Image and View Description. Upon clicking any of the buttons, conditional loading occurs.

When View Image is clicked, the Image.js component is conditionally rendered in App.js. Hence, an image loads on the screen. In this case, if you again click on View Image, Image.js will unload and the image will disappear.

When View Description is clicked, the Description.js component is conditionally rendered in App.js. Hence, a description loads on the screen. In this case, if you again click on View Description, Description.js will unload and the description will disappear.

We can also load both components together to show the Image along with its description.

Let's conditionally load two components Image.js and Description.js by using each type of loading one by one.

Conditional loading using useState

We can use React js useState hook to set the visibility of the components to true or false when a state is changed i.e. on the click of a button in this case.

Example

Code explanation

• Line 1: Import useState from react.

• Lines 2–3: Import components that are to be rendered.

• Lines 7–8: Declare a React useState hook for each component that is to be rendered.

• Line 14: Call a function when the View Image button is clicked that sets the image component to true.

• Line 15: If the image component is set to true then load the Image.js component.

• Line 16: Call a function when the View Description button is clicked that sets the description component to true.

• Line 17: If the description component is set to true then load the Description.js component.

Conditional loading using if/else

We can set the visibility of the components to true or false in the parent component and pass it to the child component. In the child component, we can use if/else conditions to load the components conditionally.

Example

Code explanation

In index.js:

• Line 10: Set the status of the isReadMode boolean to true or false and pass it to the App.js component as a prop.

In App.js:

• Lines 2–3: Import components that are to be rendered.

• Line 5: Pass a prop inside the function as a parameter to pass data from index.js to App.js.

• Line 7: Declare a new variable and save the set mode of the application in it.

• Lines 9–14: If the readMode is true load Description.js , else, if the isReadMode is false load Image.js.

Test your understanding