Hey guys, In our last article, we learnt about props and did a mini project. In this article, we’ll be talking about the concept of state as well as building a little project. Let’s dive right in 😉
What is state?
In React, state basically refers to the data that a component manages which can change over time.
Imagine you're building a weather app. The temperature at a location is a perfect example of what state represents. It can change throughout the day, and your app needs to keep track of that change and update the display accordingly.
State is essential for creating dynamic user interfaces because it allows you to store and update information that influences how your components render and behaves.
Importance of state
State is vital for building interactive applications. It enables your components to respond to user interactions, data fetching, and other events. When the state of a component changes, React automatically re-renders the component, updating the user interface to reflect the new state.
This dynamic behavior is what makes React so powerful for building modern web applications.
Using useState
Hook
Like I have said in this series, functional components are the modern way of building UI in React. To manage state in functional components, you can use the useState
hook. The useState
hook allows you to add state to your functional components easily.
💡 Hooks are special functions that are only available while React is rendering. They let you “hook into” different React features. - React Docs
There are other Hooks apart from useState
but we’ll use useState
in today’s project.
How to Use useState
in React ?
I am a project based learner and I also hope you are too. So in order to learn how useState
works, we’ll be building this simple counter project together. Let’s get started 👇🏽
Step 1: Import React and useState
hook
import React, { useState } from 'react';
In this line, we import React and the useState
hook from the React library. These are necessary for creating functional components and managing state.
*You can also decide to remove the React and just import only the useState
which will still work just fine.*
Step 2: Initialize State
const [count, setCount] = useState(0);
Here, we use the useState
hook to initialize a state variable called count
with an initial value of 0
. This is where we'll store and manage our count. and setCount
is used to update count
by providing a new value.
Step 3: Create Increment and Decrement Functions
function increment() {
setCount((prevCount) => prevCount + 1);
}
function decrement() {
setCount((prevCount) => prevCount - 1);
}
We define two functions, increment
and decrement
, which are called when the corresponding buttons are clicked(which we’ll be creating shortly). Inside these functions, we use the functional form of setCount
. This form takes a function as its argument, which receives the previous state value (prevCount
) and returns the new state value. By using this approach, we ensure that we're updating the state based on the previous state correctly.
Step 4: Render the Component
return (
<div>
<h1>Counter</h1>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
In the return
statement, we define the component's JSX. It displays the current count ({count}
), along with two buttons for incrementing and decrementing the count. When these buttons are clicked, the increment
and decrement
functions are called, updating the state and causing the component to re-render with the new count value.
Here is the code in full 👇🏽
import React, { useState } from 'react';
function Counter() {
// Initialize state with a count of 0
const [count, setCount] = useState(0);
// Function to increment the count
function increment() {
setCount((prevCount) => prevCount + 1);
}
// Function to decrement the count
function decrement() {
setCount((prevCount) => prevCount - 1);
}
return (
<div>
<h1>Counter</h1>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default Counter;
Conclusion
That’s all guys, Hope you learned something from this article, Remember that State allows you to manage dynamic data within your components, making them responsive to user interactions. As you persist in learning and applying these concepts, they will gradually become more intuitive.
Have an amazing weekend and see you next week 😀