React state not giving correct value on useEffect()

Question

I'm trying to build a factorization algorithm using react. I would like to add results to LocalStorage based on results from factorization. However, LocalStorage sets previous results not current ones.

I think this is happening because useEffect runs on every new [number] (=user input) and not based on [results]. However, I need useEffect to run on new user input submition because that's when factorization has to be triggered.

How could I make localStorage set correct results after that factorization has completed (on the finally block if possible) ?

const [results, setResults] = useState({
  default: [],
  detailed: [],
  isPrime: '',
});

const { number } = props

useEffect(() => {
  handleWorker(number);
  //accessing results here will give previous results
}, [number]);

const handleWorker = number => {
  try {
    const worker = new Worker(new URL('facto.js', import.meta.url));
    worker.postMessage({ number, algorithm });
    worker.onmessage = ({ data: { facto } }) => {
      setResults({ ...facto });
      //the worker 'streams live' results and updates them on setResults
    };
  } catch(error) {
    console.log(error.message)
  } finally {
    localStorage.setItem(number, results)
    //here, results is not current state but previous one
  }
};

Please note that everything else works fine

Thanks

lissettdm · Accepted Answer · 2021-12-25 15:02:26Z

3

+100

You are getting the previous value because localStorage.setItem is executed before setResults updates the state. Yo can do some refactor to make it work:

const [results, setResults] = useState({
  default: [],
  detailed: [],
  isPrime: '',
});

const { number } = props;
const workerRef = useRef(new Worker(new URL('facto.js', import.meta.url)));
const worker = workerRef.current;

useEffect(()=> {
    //-> create the listener just once
    worker.onmessage = ({ data: { facto } }) => {
      setResults({ ...facto }); 
    };
}, []);

useEffect(() => {
   //-> send message if number changed
   worker.postMessage({ number, algorithm });
}, [number]);

useEffect(() => {
   //-> update localStorage if results changed
   localStorage.setItem(number, results)
}, [results]);

answered Dec 25, 2021 at 15:02

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

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

1 Comment

webblover Over a year ago

Thanks for the explanation. So, it looks like React's flow of data update is conceptually correct but it contradicts with the finally {}'s workflow of ultimate code execution as found in most programming languages!

cbdeveloper · Accepted Answer · 2021-12-24 18:50:07Z

1

Here is what you need (probably):

const [results, setResults] = useState({ /* YOUR STATE */ });

const { number } = props

const handleWorker = useCallback((number) => {
  // DO WHATEVER YOU NEED TO DO HERE
},[]); // IF YOU DEPEND ON ANY MUTABLE VARIABLES, ADD THEM TO THE DEPENDENCY ARRAY

useEffect(() => {
  // DO WHATEVER YOU NEED TO DO HERE
  // INSTEAD OF localStorage.setItem(number, results)
  // DO localStorage.setItem(number, { ...facto })
}, [number,handleWorker]);

Let me know if it works.

edited Dec 24, 2021 at 18:50

answered Dec 24, 2021 at 14:10

cbdeveloper

31.9k45 gold badges209 silver badges404 bronze badges

1 Comment

Gibberish Over a year ago

Setting localStorage in the try block would not be very efficient since, as I mentionned, worker streams live results. localStorage would set many times the same number but with different results. It would be nice to have localStorage set results at the end only

labs · Accepted Answer · 2021-12-29 00:05:56Z

-1

I think you can pass in the result state as dependent for the useEffect, so whenever the value of the result change , useEffect runs

useEffect(() => { //code goes here}, [results]);

Let say results also depends on a function handleWorker

useEffect(() => { //code goes here},
    [results,handleWorker]);

edited Dec 29, 2021 at 0:05

answered Dec 24, 2021 at 19:42

labs

1,3272 gold badges9 silver badges10 bronze badges

1 Comment

labs Over a year ago

Since you will be using handleworker in the useEffect Function, you have to add it as a dependency, so whenever the result changes the useEffect function runs. Handle Worker is declared outside of the useEffect function

Collectives™ on Stack Overflow

React state not giving correct value on useEffect()

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related