SIMPLIFYING useState HOOK IN REACT (How to think about it)

Grasping the Basics: Component States and useState Hook in React

Introduction:
In the world of React Apps, think of components as the building blocks – the different pieces that come together to make the whole thing work. But there's more to it than just putting them together. We need to think about how each piece behaves internally. This article breaks down why understanding these internal behaviors, or states, is crucial, and how the useState hook helps us manage them.

The Importance of Component States:

When we create a component, like a navigation bar, we have to consider how it might act in different situations. For example, a navigation bar could be opened, closed etc. These different possibilities can be viewed as the state of the component. So, before we start building, we should think about all the possible ways our component might behave. This way, we make sure it can handle any situation it might face.

Understanding the useState Hook:

The useState hook is like a secret tool for managing how our components behave. The useState is an in-built function in react. Ideally functions return a value, useState is no exemption. useState returns two things in an array – first, a variable that holds the component's current state, and second, a function that lets us change(or update) that state.

Basic Syntax of the useState Hook

const [stateVariable, setStateFunction] = useState(initialValue);

Example:

const [count, setCount] = useState(0);

How to Read it to yourself as plain English:
"I'm creating a variable called 'count,' it will have an initial value of 0, and I also have a function named ('setCount') to alter the value of the variable count"

Putting it All Together:

1. Start by creating a React component you want.

2. Take a moment to think about all the different ways your component might behave (its states).
   Just like how humans can have the different states e.g. healthy, sick, tired etc.

3. Use the useState hook to help your component smoothly handle those different situations you've identified in step 2.

By following these simple steps, you ensure that your components not only fit together well but also know how to handle themselves in various situations.