How to handle app state without Redux ?

In this article, we will learn about handling state without Redux. There are multiple ways to manage the state without redux in any web app. In this article, we will learn state management by useState() hook. It is a react hook that returns two values the state and a function by which we can mutate the state and we can initial state as arguments, in the code below it is an empty array. The component re-renders whenever the state changes. Let’s understand this with an example. In this web-app we will maintain the state ( which is the tasks array ) in the App component, pass down the tasks array to the Task component to display in a proper format and do the state mutation in the Tasks component with the help of function provided by useState() hook.

Syntax:

const [state,setState] = useState([]);

Creating React Application And Installing Module: 

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: Run the development server by using the following command:

npm start

Project Structure: It will look like the following.

Implementation: Add the following code in respective files.

App.js : In this component we have created a state with the help of useState() and set its initial value to an array of only one element. Also we have passed down props to the Tasks component with their respective names.

Tasks.js : In this component, we have added some basic styles and hooked up handleClick() and handleChange() to the button and input fields. We have used the method to dynamically update the object property via the syntax given below. This allows us to reduce the redundancy of creating different handleChange functions for different input fields. Also, note to use this method the input field has to have a name property on it. The handleClick() function is responsible for mutating the state and adding the current task to the App’s state. We have maintained a component state which is CurrentTask it will help us keep a track of the task that the user wants to add to the list.

Task.js: This is just a presentational component that displays the task details by destructuring the values/properties.

Working demo of the web-app:

Example 2: In this example, we will not maintain state in the App component but rather in some other child component, it will be Songs component. We will create two states one to store the singer’s name and the second will be the array of top 5 hit songs of the singer whose name the user has entered. And we’ll be fetching data from Rapid API’s open API this will be done with the help of axios. Implementation is discussed below.

Install the axios as a dependency:

npm i axios

Filename – App.js : Since we are not maintaining app state in this component we don’t need any state in this file.

Filename – Songs.js: In this Component, we have initialized the Singer’s name to be Justin by default which means it will fetch data for Justin on the initial render. We have made a fetchData function which is responsible for fetching data and updating the Songs component HitsSongs state, this function is initially called when the app loads to fetch the hit songs of Justin with the help of useEffect hook. Note the params object is what will hold the singer’s name while fetching the hit songs for the singer. We can reuse this fetchData function when the user clicks on the Find button because it is a stand-alone function and does make use of any other data except for updating the HitSongs state. And finally, we have hooked-up the onClick and onChange handlers to the button and input.

Working demo of the web-app: