DEV Community

loading...
Cover image for All the use cases of useState I use in my projects.

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

gautham495 profile image Gautham Vijayan ・3 min read

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

},[])

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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}/>
Enter fullscreen mode Exit fullscreen mode

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:

Discussion (4)

pic
Editor guide
Collapse
terabaud profile image
Lea Rosema (she/her)

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.

Collapse
gautham495 profile image
Gautham Vijayan Author

This is a more advanced case in terms of useEffect and useState. Cleanup function is a topic I have to look more into!

Thank you for mentioning it!

Collapse
janpauldahlke profile image
jan paul • Edited

Interesting read tho i prefer to store my ajax response in redux and not state.

Collapse
gautham495 profile image
Gautham Vijayan Author

The info you said here is coming soon as post. Stay tuned.