I'm using react and apexcharts to plot data in real time I receive from a bluetooth device.
To achieve smooth animation I had to create a render loop with withing a setTimeout() function which is triggered each second and use a useRef() hook which references the latest received data.
useEffect(() => {
let bioFeedbackDataAnimation: number;
bioFeedbackDataAnimation = window.setInterval(() => {
if (stateRef.current) {
ApexCharts.exec('realtime', 'updateSeries', stateRef.current, true);
}
}, 1000);
return function cleanup() {
window.clearInterval(bioFeedbackDataAnimation);
};
}, []);
This works perfectly and the animation is smooth because time between renders is constant.
However, I now need to find out - inside the animation loop - if the data I'm plotting is the same as the data I plotted one second ago. I tried using the usePrevious hook, but all exemples I found are to fetch the previous value of a useState hook.
Is it possible to fetch the previous useRef.current value of a useRef hook? If so, how?
Thank you!
I couldn't find out how to do this.
The workaround I found consists of: When storing latest data, also store the previous data in another useState hook and then reference it as well using another stateRef hook.
Related
I know similar questions are bouncing around the web for quite some time but I still struggle to find a decision for my case.
Now I use functional React with hooks. What I need in this case is to set a state and AFTER the state was set THEN to start the next block of code, maybe like React with classes works:
this.setState({
someStateFlag: true
}, () => { // then:
this.someMethod(); // start this method AFTER someStateFlag was updated
});
Here I have created a playground sandbox that demonstrates the issue:
https://codesandbox.io/s/alertdialog-demo-material-ui-forked-6zss6q?file=/demo.tsx
Please push the button to get the confirmation dialog opened. Then confirm with "YES!" and notice the lag. This lag occurs because the loading data method starts before the close dialog flag in state was updated.
const fireTask = () => {
setOpen(false); // async
setResult(fetchHugeData()); // starts immediately
};
What I need to achieve is maybe something like using a promise:
const fireTask = () => {
setOpen(false).then(() => {
setResult(fetchHugeData());
});
};
Because the order in my case is important. I need to have dialog closed first (to avoid the lag) and then get the method fired.
And by the way, what would be your approach to implement a loading effect with MUI Backdrop and CircularProgress in this app?
The this.setState callback alternative for React hooks is basically the useEffect hook.
It is a "built-in" React hook which accepts a callback as it's first parameter and then runs it every time the value of any of it's dependencies changes.
The second argument for the hook is the array of dependencies.
Example:
import { useEffect } from 'react';
const fireTask = () => {
setOpen(false);
};
useEffect(() => {
if (open) {
return;
}
setResult(fetchHugeData());
}, [open]);
In other words, setResult would run every time the value of open changes,
and only after it has finished changing and a render has occurred.
We use a simple if statement to allow our code to run only when open is false.
Check the documentation for more info.
Here is how I managed to resolve the problem with additional dependency in state:
https://codesandbox.io/s/alertdialog-demo-material-ui-forked-gevciu?file=/demo.tsx
Thanks to all that helped.
I am trying to setup a functional component that allows the user to copy/paste their clipboard image into the app. In useEffect, I setup document.onpaste . This was working and I was able to get the image and upload it. But I need to have it update the state after paste, so that I can allow them to paste multiple images and keep them in array in state.
I've simplified the problem below. Basically when I paste I want to have it update the counter value, but it doesn't. Counter always = 0. If I use normal react button onclick event, it works fine. I'm guessing the onpaste event is outside of React, but then,
How can I process the paste event and also update the functional state?
import React, { useEffect, useState } from 'react';
const AddAttachmentsContainer = ({ zoneid, tableid, field }) => {
const [counter,setCounter]=useState(0);
useEffect(() => {
document.onpaste=(e)=>{GetImage(e);e.preventDefault()}
},[])
const GetImage = (e) => {
setCounter(counter+1)
console.log(counter)
}
}
If I am not mistaken, I'll bet that the state is updated. useState will update the state and trigger a re-render. Since it is asynchronous, console.log will be called with the old state value.
useEffect(() => console.log(counter), [counter]);
... don't forget to add counter in the second argument of useEffect. see here...
Also see here
Alternatively, of course, you can also use refs, but be aware of the use cases for them. It is easy to allow refs to unnecessarily spread through your code.
To be honest, it might be wise to just setCounter in the useEffect you already have and call your GetImage function afterwards... from there, you can retrieve counter. There are multiple approaches to this.
How do I prevent my React component from fetching images every time the component is rendered and to fetch them from the store instead? I don't want to get rate limited by doing the API call over and over again, but the problem with useEffect is that it seems to be unaware of the variables being set "outside" of the effect. It seems to completely ignore !images.length and when I log the value for images.length it is always 0 :(
Images.tsx
const dispatch = useDispatch();
const images = useSelector(selectedImages);
useEffect(() => {
if (!images.length) {
dispatch(fetchImages());
}
}, []);
With React hook useMemo you will only call the API whenever you need it
https://www.robinwieruch.de/react-usememo-hook
https://reactjs.org/docs/hooks-reference.html#usememo
It is always logging 0 is because you didn't put anything inside dependency array of useEffect so that whenever React re-render your component, it looks inside the useEffect and see nothing inside the dep array, so it just skip running that useEffect.
When you use useEffect, you should declare dependencies in the array of useEffect that are used inside useEffect
const dispatch = useDispatch();
const images = useSelector(selectedImages);
useEffect(() => {
if (!images.length) {
dispatch(fetchImages());
}
}, [images]); // Our deps
So, let's say:
First, by default it will run the useEffect and do all the logics inside that effect. If the images array is empty, calling the API to get images.
Second, images array is not empty anymore, and the 2nd images is different from 1st images array which is empty, so it still run to the useEffect. But it won't fetch images anymore because you have if condition there.
I'm working on an react native app.
This app use a database, the main component use 2 differents hook.
The first hook retrieves the results of a SQL query and store them in a variable.
The second hook creates a list from the first variable
Like this:
const [people, setPeople ] = useState([]);
useEffect (() => {
db.getAllPeople().then(row => setPeople(row))
},[])
const [listData, setListData] = useState([]);
useEffect(()=> {
setListData(
Array(people.length)
.fill('')
.map((_, i) => ({ key: `${i}`, name: `${people[i].name}`}))
)
}, [people]);
After that, my main component displays a SwipeList from the results.
Here is the problem. I am using another component to add an element to my database. When I return to my main component I would like this new element to be displayed. But the problem is that the 2 hooks are not called on the component change and the list therefore remains unchanged.
I've tried to use the useFocusEffect but it doesn't work in my case.
Any suggestions ?
I think the useState hook manages the state of the component itself, unless you are passing this state among your parent and child or using callbacks to set the state on the component that you want to render, you could use a single source of truth to handle the changes in data, react itself will notice this changes and therefore, render the changed screens, considering that you have asynchronous operations when querying the database, a combination of redux and redux saga may help you.
https://github.com/redux-saga/redux-saga
There're one issues with your current code, or potential issues
Your second useEffect might get called when people becomes an empty list, this will reset your list data. The cure is to put a if statement inside, ex.
useEffect(()=> {
if (!people) return;
setListData(...)
}, [people]);
To be honest, if these two lists are connected, you shouldn't use two hook. The best way is to define listData
const listData = (a function that takes people as input), ex.
const listData = people.map(v => v)
Of course, there might be a reason why you'd like to introduce more hook in complex situation, ex. useRef, useMemo.
I want to update state every second inside setinterval() but it doesn't work.
I am new to react hook so can not understand why this is happening.
Please take a look at the following code snippet and give me advice.
// State definition
const [gamePlayTime, setGamePlayTime] = React.useState(100);
let targetShowTime = 3;
.........................
// call function
React.useEffect(() => {
gameStart();
}, []);
.............
const gameStart = () => {
gameStartInternal = setInterval(() => {
console.log(gamePlayTime); //always prints 100
if (gamePlayTime % targetShowTime === 0) {
//can not get inside here
const random = (Math.floor(Math.random() * 10000) % wp("70")) + wp("10");
const targetPosition = { x: random, y: hp("90") };
const spinInfoData = getspinArray()[Math.floor(Math.random() * 10) % 4];
NewSpinShow(targetPosition, spinInfoData, spinSpeed);
}
setGamePlayTime(gamePlayTime - 1);
}, 1000);
};
The reason why you did not get updated state is because you called it inside
useEffect(() => {}, []) which is only called just once.
useEffect(() => {}, []) works just like componentDidMount().
When gameStart function is called, gamePlaytime is 100, and inside gameStart, it uses the same value however the timer works and the actual gamePlayTime is changed.
In this case, you should monitor the change of gamePlayTime using useEffect.
...
useEffect(() => {
if (gamePlayTime % targetShowTime === 0) {
const random = (Math.floor(Math.random() * 10000) % wp("70")) + wp("10");
const targetPosition = { x: random, y: hp("90") };
const spinInfoData = getspinArray()[Math.floor(Math.random() * 10) % 4];
NewSpinShow(targetPosition, spinInfoData, spinSpeed);
}
}, [gamePlayTime]);
const gameStart = () => {
gameStartInternal = setInterval(() => {
setGamePlayTime(t => t-1);
}, 1000);
};
...
You're creating a closure because gameStart() "captures" the value of gamePlayTime once when the useEffect hook runs and never updates after that.
To get around this, you must use the functional update pattern of React hook state updating. Instead of passing a new value directly to setGamePlayTime(), you pass it a function and that function receives the old state value when it executes and returns a new value to update with. e.g.:
setGamePlayTime((oldValue) => {
const someNewValue = oldValue + 1;
return someNewValue;
});
Try this (essentially just wrapping the contents of your setInterval function with a functional state update):
const [gamePlayTime, setGamePlayTime] = React.useState(100);
let targetShowTime = 3;
// call function
React.useEffect(() => {
gameStart();
}, []);
const gameStart = () => {
gameStartInternal = setInterval(() => {
setGamePlayTime((oldGamePlayTime) => {
console.log(oldGamePlayTime); // will print previous gamePlayTime value
if (oldGamePlayTime % targetShowTime === 0) {
const random = (Math.floor(Math.random() * 10000) % wp("70")) + wp("10");
const targetPosition = { x: random, y: hp("90") };
const spinInfoData = getspinArray()[Math.floor(Math.random() * 10) % 4];
NewSpinShow(targetPosition, spinInfoData, spinSpeed);
}
return oldGamePlayTime - 1;
});
}, 1000);
};
https://overreacted.io/making-setinterval-declarative-with-react-hooks/
Dan Abramov article explains well how to work with hooks, state, and the setInterval() type of API!
Dan Abramov! Is one of the React maintaining team! So known and I personally love him!
Quick explanation
The problem is the problem of how to access the state with a useEffect() that executes only once (first render)!
Note: For a deep explanation of why the state isn't updated within the useEffect callback and other inside useEffect callbacks. Check the last section about closures and react re-render ...
The short answer is: by the use of refs (useRef)! And another useEffect() that run again when update is necessary! Or at each render!
Let me explain! And check the Dan Abramov solution! And you'll get better the statement above at the end! With a second example that is not about setInterval()!
=>
useEffect() either run once only, or run in each render! or when the dependency update (when provided)!
Accessing state can be possible only through a useEffect() that run and render each relevant time!
Or through setState((state/*here the state*/) => <newStateExpression>)
But if you want to access the state inside useEffect() => re-run is necessary! meaning passing and executing the new callback!
That doesn't work well with setInterval! If you clear it and re-set it each time! the counter get reset! Leading to no execution if the component is re-rendering fast! And make no sense!
If you render only once! The state is not updated! As the first run, run a one callback! And make a closure! The state is fixed! useEffect(() => { <run once, state will stay the same> setInterval(() => { <state fixed as closure of that time> }) }, []).
For all such kind of situation! We need to use useRef! (refs)!
Save to it a callback that holds the state! From a useEffect() that rerenders each time! Or by saving the state value itself in the ref! Depending on the usage!
Dan abramov solution for setInterval (simple and clean)
That's what you are looking for!
useInteval hook (by Dan Abramov)
import React, { useState, useEffect, useRef } from 'react';
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
Usage
import React, { useState, useEffect, useRef } from 'react';
function Counter() {
let [count, setCount] = useState(0);
useInterval(() => {
// Your custom logic here
setCount(count + 1);
}, 1000);
return <h1>{count}</h1>;
}
We can see how he kept saving the new callback at each re-render! A callback that contains the new state!
To use! it's a clean simple hook! That's a beauty!
Make sure to read Dan article! As he explained and tackled a lot of things!
setState()
Dan Abramov mentioned this in his article!
If we need to set the state! Within a setInteral! One can use simply setState() with the callback version!
useState(() => {
setInterval(() => {
setState((state/*we have the latest state*/) => {
// read and use state
return <newStateExpression>;
})
}, 1000);
}, []) // run only once
we can even use that! Even when we are not setting a state! Possible! Not good though! We just return the same state value!
setState((state) => {
// Run right away!
// access latest state
return state; // same value (state didn't change)
});
However this will make different react internal code part run (1,2,3), And checks! Which ends by bailing out from re-rendering! Just fun to know!
We use this only when we are updating the state! If not! Then we need to use refs!
Another example: useState() with getter version
To showcase the how to work with refs and state access! Let's go for another example! Here is another pattern! Passing state in callbacks!
import React from 'react';
function useState(defaultVal) {
// getting the state
const [state, setState] = React.useState(defaultValue);
// state holding ref
const stateRef = React.useRef();
stateRef.current = state; // setting directly here!
// Because we need to return things at the end of the hook execution
// not an effect
// getter
function getState() {
// returning the ref (not the state directly)
// So getter can be used any where!
return stateRef.current;
}
return [state, setState, getState];
}
The example is of the same category! But here no effect!
However, we can use the above hook to access the state in the hook simply as below!
const [state, useState, getState] = useState(); // Our version! not react
// ref is already updated by this call
React.useEffect(() => {
setInteval(() => {
const state = getState();
// do what you want with the state!
// it works because of the ref! Get State to return a value to the same ref!
// which is already updated
}, 1000)
}, []); // running only once
For setInterval()! The good solution is Dan Abramov hook! Making a strong custom hook for a thing is a cool thing to do! This second example is more to showcase the usage and importance of refs, in such state access need or problem!
It's simple! We can always make a custom hook! Use refs! And update the state in ref! Or a callback that holds the new state! Depending on usage! We set the ref on the render (directly in the custom hook [the block execute in render()])! Or in a useEffect()! That re-run at each render or depending on the dependencies!
Note about useEffect() and refs setting
To note about useEffect()
useEffect => useEffect runs asynchronously, and after a render is painted on the screen.
You cause a render somehow (change state, or the parent re-renders)
React renders your component (calls it)
The screen is visually updated
THEN useEffect runs
Very important of a thing! useEffect() runs after render() finishes and the screen is visually updated! It runs last! You should be aware!
Generally, however! Effects should be run on useEffect()! And so any custom hook will be ok! As its useEffect() will run after painting and before any other in render useEffect()! If not! As like needing to run something in the render directly! Then you should just pass the state directly! Some people may pass a callback! Imagine some Logic component! And a getState callback was passed to it! Not a good practice!
And if you do something somewhere of some such sense! And talking about ref! Make sure the refs are updated right! And before!
But generally, you'll never have a problem! If you do then it's a smell! the way you are trying to go with is high probably not the right good way!
Closure and more. Why the state variables are not having the latest value?
The why you can't simply access the state value directly boils down to the closure notion. Render function at every re-render go totally with a new call. Each call has its closures. And at every re-render time, the useEffect callback is a new anonymous function. With its new scope of value.
And here the dependency array matter. To access the closure of this call. And so the recent state of this call. You have to make useEffect use the new callback. If dependencies change then that would happen. If not that wouldn't.
And if you do [] then useEffect() would run the first time only. every new call after the first render. Would always have useEffect get a new anonymous function. But none of them is effective or used (run).
The same concept applies to useCallback and many other hooks. And all of that is a result of closures.
callbacks inside the useEffect callback
ex: event listners, setInterval, setTimeout, some(() => {}), api.run(() => {})
Now even if you update the useEffect callback through dependency change. And let's say you did some event listener or setInterval call. But you did it conditionally so if already running no more setting it. The setInterval callback or event listener callback wouldn't get access to the recent state value. Why? you already guessed. They were created in the first run, first call space and all the state values are closure passed down at that **time**. And in the later updates and calls. It's a new render function call. And a whole different useEffect callback as well. Sure it's the same function code. But not same functions at all. The initial callback of the initial run on that render function call. Is a function that was created back then. And then the event listener callback or the setInterval callback was created back then. And they are still in memory and referred to. The event listener part of the event listener API objects instances, and the object that made the registration and the setInterval part of the node runtime. They had the state closure having the value of the time. And never get to see or know about any other re-render call. **Unless somehow you. inject something within. That still referencesorcan access the latest value(references or globals). And those values come from the hooks (useState) and their internal machinery. All it would have is theclosures of the time of the creation.**
Funny metaphor
Most people falling into this trap. Look at the code and saying hey why when the state updates it's not getting the newer value. And the answer is. The state value is something coming from useState, it's not a global variable. And even though you are looking at the same code. The first call and later calls are all different spaces (beings). The only thing making it possible for us to work with functions in this sense is the hooks. And how they store the state and bring it back.
And a good metaphor would be: to get to an office and do some contract and deal. And then later come back and enter the same office, but wait not really the same office rather one that looks the same. But a new office took its place (moved out, moved in, same activity). And you wonder why they didn't recognize you. Yup a bit of an off of a metaphor. But still good a bit.
On the whole I hope that gave you a good sense!
You shouldn't use setInterval with hooks. Take a look at what Dan Abramov, one of the maintainers of React.js, said regarding an alternative on his blog: https://overreacted.io/making-setinterval-declarative-with-react-hooks/