React HooK= { Briefly Explained};

useState is a React Hook that allows you to add state to your components by returning an array with two variables: state, setState. The current state and the function that becomes the setter function when it is called. It can be used to track data or properties that need to be tracked in an application, such as strings, numbers, booleans, arrays, or objects.
Example:

const [state, setState] = useState();

In simple terms, state will change at some any point and it needs to be updated, therefore 'setState' will update the state, triggering a re-render of your components over time.

In addition, useState can hold any kind of Javascript value, including objects. Something to ALWAYS keep in mind is that you should never change objects that you hold in React state directly. First, you need to create a new one or create a copy of an existing one and then setState to the new copy. For example:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

To use useState in a React component, first you need to import it form React by writing the following code in the top of the component's page in two different ways, both work perfectly so you can choose your poison.

import React from 'react'; 
import {useState} from 'react';

or you can write in one line

import React, {useState} from 'react';

React Hook useState can be called at the top level of a component or within custom hooks but not inside loops or conditions.

const [initialState, setInitialState] = useState();

the initialState is only used during the initial render and will be disregard in subsequent renders.
The initialState function is passed to the setInitialState function, it takes the previous state as an argument, and returns a newState.

Furthermore, in my opinion, there are no special rules about where you can and cannot use Hooks in React. Of course, you have to be cautious and tactical to keep you code organized.

In one of my projects, building a SPA(Single Page App) there were various components to achieve my goal. The secret to be well organize, is to keep track of your components. For instance, your App.js component will use {useState} depending on what type of data needs updating.
Let's introduce another powerful hook from React called: {useEffect} and use it along {useState} to explain how these hook perform operations on data. The following example comes from my App.js component I used in a recent project. I was working with a db.json file data for toys that will help children development for the first year. This is my endpoint http://localhost:4000/toys to help you understand the process of how {useState} and {useEffect} work inside inside of an application component.

First: Initialize State:

const [toys, setToys] = useState([]);

• This line initializes a state variable toys with an empty array [] as the initial value.
• setToys is a function that will be used to update the toys state.

Second: Fetch Data on Component Mount:

useEffect(() => {             
    fetch("http://localhost:4000/toys")  
      .then(response => response.json())
      .then(data => setToys(data)); 
  }, []);

• The {useEffect} hook is used to perform side effects in the component.
• The function inside {useEffect} will run once when the component mounts because the dependency array ([]) is empty.

Third: Fetch Toys Data:

• fetch("http://localhost:4000/toys")
  • This line makes a GET request to the specified URL to fetch toys data.
• .then(response => response.json())
  • the response from the fetch request is converted to JSON format.
• .then(toysData => setToyData(toysData));
  • The JSON data (toysData) is used to update the toys state using the setToys function.

To understand more in depth how both {useState, useEffect} work you can visit the official React website. In addition, another helpful source is w3schools website, that is my personal favorite. It goes straight to the point with examples that you can try in their own browser. Lastly, if you need a more technical source, the mdn web docs will help you.

Comments

[chrischism8063]

Hey,
Great write up, just a comment to improve your post if you don't mind.

The examples would be better if you implement dynamic parameters so that it is understood to set the state you have to pass params vs setting state with a specific value / static value.

I like the rest of the writeup.

Great job!!

[Marlon Munoz]

I appreciate your feedback, I'll look into it as soon as I get some time off of this busy week and will implement your feedback. You constructive criticism is greatly welcome as I will help me improve my posts tremendously. Thanks again, truly