React JS State Management for Beginners | Easy Guide bilal shafqat

Table of Contents

React JS State Management for Beginners | Easy Guide

In this tutorial, you’ll learn about state management in React, understand how props work, and why using a state management library like Redux can simplify your code.

Understanding State and the useState Hook

State is an important concept in React because it helps keep track of data that changes over time. Let’s start by using the useState hook to manage state within functional components.

What is useState?

The useState hook is used to create and manage the state in a functional component. It returns two values:

    1. The current state (initially set to a value of your choice)
    2. A function to update that state
				
					const [counter, setCounter] = useState(0);

Creating a Basic Counter App

In this app, we’ll create three buttons to:

  • Increment the counter
  • Decrement the counter
  • Reset the counter

Here’s how the buttons will work:

				
					<button onClick={() => setCounter(counter + 1)}>Increment</button>
<button onClick={() => setCounter(counter - 1)}>Decrement</button>
<button onClick={() => setCounter(0)}>Reset</button>
With each button click, the state will update, and the component will re-render with the new counter value.

Organizing the Counter Appp

Next, we’ll turn our counter logic into a React component for better organization.

  1. Create the Counter Component:
    • Inside a folder named counter, create a file called Counter.js.
    • Use the rafce shortcut to generate a functional component quickly.
  2. Move the Logic to the Component:
    • Put the useState hook and all button functions inside Counter.js.
    • Import this Counter component into the main App.js file.

What Are Props?

what are props bilal shafqat
What are props?

Props (short for properties) allow React components to communicate with each other by passing data from parent components to child components. In the example above:

  • We keep the counter state and functions in the parent component.
  • Then, we pass them down to the child Counter component using props.

Props are very useful for passing values like numbers, arrays, and even functions between components. However, as your app grows, this can become tricky.

Understanding Prop Drilling

what is props drilling?

When you pass props from a parent component down to deeply nested child components, you end up with a lot of code just passing data down the tree. This is called prop drilling. Prop drilling can make your code messy and hard to maintain, especially if you need to pass data through multiple layers of components.

Solving Prop Drilling with Redux

To avoid the mess of prop drilling, we can use a state management library called Redux. Redux helps manage the state of your entire application in a central store.

  • What is Redux? Redux allows you to store your app’s state in one place, and any component can access the state without needing to pass props.
  • Why Redux?
    • It eliminates the need to pass props down multiple components (solving prop drilling).
    • It keeps your state in one organized place.

Watch the Full Tutorial on YouTube

For a step-by-step visual guide, watch my YouTube video where I walk you through building the counter app, using useStateAnd understanding state management in React: Watch the video here!