DEV Community

Marlon Munoz
Marlon Munoz

Posted on

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();


Enter fullscreen mode Exit fullscreen mode

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));
};


Enter fullscreen mode Exit fullscreen mode

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';


Enter fullscreen mode Exit fullscreen mode

or you can write in one line



import React, {useState} from 'react';


Enter fullscreen mode Exit fullscreen mode

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();


Enter fullscreen mode Exit fullscreen mode

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([]);


Enter fullscreen mode Exit fullscreen mode
  • 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)); 
  }, []);


Enter fullscreen mode Exit fullscreen mode
  • 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.

Top comments (2)

Collapse
 
chrischism8063 profile image
chrischism8063 • Edited

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!!

Collapse
 
marlonmunoz profile image
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