useEffect on async operation

Question

I'm a little confused when to use useEffect() the majority of the examples I see only use useEffect() to pull data from an API and other examples of side effects, but I haven't seen people using useEffect() when sending POST request when the component will mount.

Then I was taking the course of Epic React, this custom hook confused me:

const useLocalStorageState = (key, value = "") => {
  const [state, setState] = React.useState(() => window.localStorage.getItem(key) || value)

  React.useEffect(() => {
    window.localStorage.setItem(key, state)
  }, [key, state]);

  return [state, setState]
};

It confused me because they are not using useEffect() to read from the local storage, which is a side effect, they are using useState(), I would have used useEffect() then useState() to set the value of the state variable
useEffect() is being used for the side effect of writing to localStorage, if this was a POST request to an API, will useEffect() still apply?

for #1, what benefit would there be in your opinion to move getItem into useEffect ? — Evert
– Evert, Commented Aug 11, 2021 at 5:11
1. Why would they use getItem? They want to update local storage on every state change 2. yes — Dennis Vash
– Dennis Vash, Commented Aug 11, 2021 at 5:13
@Evert For my little understanding of a lot of this( That's why I'm taking the Epic react course) if I'm pulling data that I need before the component will mount, I use the useEffect which can help you avoid side effects with that re-renders? — Patricio Vargas
– Patricio Vargas, Commented Aug 11, 2021 at 5:15
@devpato that sounds reasonable, i think I can answer this =) — Evert
– Evert, Commented Aug 11, 2021 at 5:16
@DennisVash it's a tic tac toe game and yes, they want to save the state of the game so every time I make a move, gets stored in localstorage and if I refresh the page, I see the state of the game who it was before I refreshed the page. I think the author is using useState to get the state every time the state changes but isn't this doable via useEffect as well if I don't pass the dependency array? This looks like a shortcut by just using useState(). Thoughts? — Patricio Vargas
– Patricio Vargas, Commented Aug 11, 2021 at 5:19

Evert · Accepted Answer · 2021-08-11 05:22:35Z

1

It confused me because they are not using useEffect() to read from the local storage, which is a side effect, they are using useState(), I would have used useEffect() then useState() to set the value of the state variable

A good reason to use useEffect is that it can prevent the call to localStorage.getItem(), for every render.

However, this would be needed if you did call localStorage.getItem(), for every render.

const [state, setState] = React.useState(
  () => window.localStorage.getItem(key) || value
)

In this example, getItem is not called for each render. It's only used in the callback passed to getState(). This is the initial value and it will only be used on the very first render. So, it solves the same problem.

useEffect() is being used for the side effect of writing to localStorage, if this was a POST request to an API, will useEffect() still apply?

It may be useful in useEffect, but it depends on the situation. In many cases a POST request could be triggered when the user presses a button (submit or click events). In those cases the POST request is likely triggered from event handlers.

If you need to always do a POST on specific React lifecycle events (update, mount, etc), they would need to be in useEffect.

answered Aug 11, 2021 at 5:22

Evert

101k18 gold badges136 silver badges221 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patricio Vargas Over a year ago

Evert, thanks for answering. Now, if I use getItem() inside of a useEffect and add that to the dependency array, wouldn't this be called only one time and doing the same as the code I provided?

Evert Over a year ago

It depends what you put in useState as the default value. useEffect() will only ever change the second render.

Collectives™ on Stack Overflow

useEffect on async operation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related