All the use cases of useState I use in my projects.

#react #beginners #tutorial #javascript

In this post I will discuss the ways in which I use useState in my projects.

1. To get API data from backend and store it in state.

const [data,setdata]=useState([])

useEffect(()=>{
const getdata = async () =>{

const res = await axios.get(apiurl)
setdata([{...res.data}]
}

getdata()

},[])

As I use MongoDB most of the time, the data which comes from the backend is in object/JSON form.

So to send the data from

The frontend in forms and
To get the data from the backend,

I initialize a null or an empty state and get that backend data or the frontend data and push it to the useState variable and display it with map function.

I use map function because I initialized an empty array and inserted object data into it as map function works only for arrays.

Spread operator [...] is used here because when we want to get data from an API we will not require all the data present inn it and want only a select few.

So to persist the existing data in the array we use spread operator.

I have added spread operator here just to show there is an use case for it in useState as well.

2. For True or false values.

const[open,setopen] = useState(false)

{{open && <div>If I Click a button or any other condition I wish or have show this div </div>}}

Literally the most used use case of useState in workflow.

Whenever the logic permits to have a boolean condition such as show something when I click a button, I just plugin this condition to get the job done!

3. Regular State management and to pass as props


const [data,setdata] = useState('2')

<Component data={data}/>

This one is the most basic one which all of React developers use, but just to aid beginners I have mentioned it here.

Like the first use case I mentioned above, I can just pass data into an empty array and pass it as props to another component and use my data there.

This will be very useful if you want to create a card like component with map function and output it in the frontend which I do all the time.

And that's some of my most used useState use cases I have mentioned here.

There are a lot more ones which more experienced senior react.js developers may use which I do not know.

If you know any other cases than the mentioned ones here, please mention it in the comments.

Thank you for reading!!

Check out my portfolio: Gautham's portfolio

Check out my blog: coding-magnified.tech

My Other Articles:

Top comments (4)

Lea Rosema (she/her) • Nov 29 '20

There's one edge case to consider: If the API request is slow (you can simulate that by emulating slow 3G in your network tab), and the component get's unmounted in the meantime (eg because the user navigates to another route), the API request completes and setdata is called but the component isn't there anymore.

It is recommended to cancel the request in the useEffect cleanup return function.