I have this scenario
const [showAlertLink, setShowAlertLink] = useState(false);
const handleClick = () => {
setShowAlertLink(true);
};
<Button disableRipple onClick={handleClick}>
{!!showAlertLink && <Alert icon={<CheckIcon fontSize="inherit" />} onClose={() => setShowAlertLink(false)}>{t(`alert_link_copied`)}</Alert>}
At the moment if i click on the Icon i can close the Alert.
How can i make this alert closing automatically with a SetTimeout duration 2 seconds for example?
You can use useEffect:
useEffect(() => {
let timeout
if (showAlertLink) {
timeout = setTimeout(() => setShowAlertLink(false), 2000);
}
return () => clearTimeout(timeout);
}, [showAlertLink]);
It will trigger when showAlertLink value changes. If it is true it will set a timeout to set it to false in 2 seconds (2000).
Be careful that you always return the effect to clear the timeout (to ensure you don't get tried to update state of an unmounted component) error.
If you are using typescript, you can type timeout like so:
let timeout: ReturnType<typeof setTimeout>;
Related
I have multiple text fields to save values automatically when users start typing in React. I want to use setTimeOut inside the onChange function to avoid re-render/api call every time a user types a character. The issue is that the clearTimeOut will clear everything afterward even if I'm typing in different fields so I can only catch the latest value of the latest field that the mouse focus is in instead of all values from each text field. Please let me know is this the right way to achieve it. Thanks!
const [values, setValues] = useState([]);
useEffect(() => {
//call API
}, [values]);
let timer: any;
const onChange =
(index) =>
(event) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
let temp = [...values];
temp[index] = event.target.value;
setValues(temp);
}, 2000);
};
return <div>
{data?.map((field, index) => (
<TextField
key={index}
variant="outlined"
onChange={onChange(field.index)}
/>
))}
</div>
I have this code, i'd like to clearInterval from outside this component (let's assume that I render a button with onClick method that calls clearInterval function).
I tried to pass interval value as a ref, but as soon as state updates this value changes.
useEffect(() => {
(intervalRef.current as ReturnType<typeof setInterval> | undefined) = setInterval(() => {
fetch().then((items) => {
items.forEach((item, id) => {
// set state based on the values
});
});
}, 5000);
return () => clearInterval(intervalRef.current);
}, [state]);
I'm also getting eslint warning for return () => clearInterval(intervalRef.current), so I assume that it won't clear properly inside this method as well.
"The ref value 'intervalRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'intervalRef.current' to a variable inside the effect, and use that variable in the cleanup function."
What is the correct approach of such issues in React?
useEffect(() => {
const intervalId = setInterval(() => {
fetch().then((items) => {
items.forEach((item, id) => {
// set state based on the values
});
});
}, 5000);
return () => clearInterval(intervalId);
}, [state]);
You dont need to make it a ref, if all you want is to clean the interval on unmount. Just assign it to a variable and pass it to your cleanup function.
Note: i see you are planning on doing a state update in promise. you might run into issue where component is unmounted and then the promise callback is triggered which tries to update state. so maybe put a isMounted check
"The ref value 'intervalRef.current' will likely have changed by the
time this effect cleanup function runs. If this ref points to a node
rendered by React, copy 'intervalRef.current' to a variable inside the
effect, and use that variable in the cleanup function."
This is saying to save a reference to the ref value in the useEffect hook's callback closure, to be used in the cleanup function.
useEffect(() => {
(intervalRef.current as ReturnType<typeof setInterval> | undefined) = setInterval(() => {
fetch().then((items) => {
items.forEach((item, id) => {
// set state based on the values
});
});
}, 5000);
const timerId = intervalRef.current;
return () => clearInterval(timerId);
}, [state]);
If you need to, or want to, clear the interval from anywhere else in the component scope, just clear the interval as you would normally with the current ref value:
clearInterval(intervalRef.current);
I am looking to stop an interval function when a user on my website changes the page. I searched online for "how to tell if a react element is visible on the screen," but I can only find results for intersection observers. Is there a way to stop an interval function when a react component dismounts? (ps. I believe dismounting is when the component is no longer rendered?)
Heres my component interval:
useEffect(() => {
const updatePostInfo =
inView &&
setInterval(() => {
dispatch(getPostInfo(data._id));
}, 3500);
!inView && clearInterval(updatePostInfo);
}, [inView]);
Currently, I have it set up with an intersection observer so that it doesn't dispatch the function when it isn't visible. But the interval still runs when the page changes?
You need to return a cleanup function from your effect:
useEffect(() => {
const updatePostInfo = setInterval(() => {
dispatch(getPostInfo(data._id));
}, 3500);
return () => clearInterval(updatePostInfo);
}, []);
I'm currently running into some issues whilst developing a Typescript React App.
Underneath is my current code..
But it's not behaving like I would want it to behave. :)
So what I would like to achieve is that the data with getData(depth) runs whenever the component is being loaded and afterwards every 5 seconds.
But when the Depth changes with the Dropdown.item buttons, it should re-render and the getData() should be ran with the new depth value that we just set in the state.. and keep on rendering afterwards with the new value...
I've been struggling with this, so any help is very much appreciated!!
Thank you!
import React, { useState, useEffect } from "react";
const chart = () => {
const [depth, setDepth] = useState(20);
const [chartData, setChartData] = useState({})
//Getting the data when the app initially renders and should keep rendering every 5 seconds after that.
//When the value of the depth changes, we should stop getting the data with the old depth //value and should start a new interval of 5 seconds and just keep running with the new //depth value
//When first entering the app, this should run immediately with the initial depth state //(20)
useEffect(() => {
const interval = setInterval(() => {
//this code is not the actual code, just an example of what is running
const data = getData(depth)
//just fetched the new data, now setting it..
setChartData(data)
}, 5000);
return () => clearInterval(interval);
}, []);
return (
<div>
<div>
<DropdownButton id="dropdown-basic-button" title="Depth Percentage">
<Dropdown.Item onClick={() => setDepth(5)}>5%</Dropdown.Item>
<Dropdown.Item onClick={() => setDepth(20)}>20%</Dropdown.Item>
</DropdownButton>
</div>
<div>
//Rendering the Chart here....
</div>
</div>
);
};
export default chart;
That's because useEffect hook take a second params called dependency array, where this dependency array is what matter for the inner callback(inisde useEffect) to access the latest values you want.
So your are not being totally truthful here, if the inner callback depends on depth to be in its latest update then you should include it in the dependency array
useEffect(() => { ... }, [ depth ]);
that's for the depth but writing this code will immediately cause problems because for each new depth value the inner callback will be called and the setInterval will re-run again (causing many many...many of intervals).
To solve this you should avoid using setInterval alll together in hooks based code.
If having interval is really important I have a suggestion for you
const [intervalCount, setIntervalCount] = useState(0);
const [depth, setDepth] = useState(20);
const [chartData, setChartData] = useState({})
useEffect(() => {
// when depth change re-fetch data and set it
const data: any = getData(depth);
setChartData(data);
}, [depth])
// simulate set interval behavior
// each 5 s this function will be re-invoked
useEffect(() => {
// re-fetch data and set it
const data: any = getData(depth);
setChartData(data);
// wait 5 s before cause a re-render
setTimeout(() => {
setIntervalCount(count => count + 1);
}, 5000);
}, [intervalCount]);
Updated: After rading from Dan Abramov blog
you can find a better elegant solution that use setInterval and hooks
Making setInterval Declarative with React Hooks
He made a custom hook called useInterval
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 be like
useInterval(() => {
// Your custom logic here
setCount(count + 1);
}, 1000);
We have migrated to 'React Functional Components' instead of 'Class based Component'. I cannot find the substitute logic for setState callback function. I.e, I have a functional component with state, and I want to create an event handler function that mutates the state multiple times in sequence, the caveat being that I dont know the current value of state (it may be true/false). The following example may make more sense.
const Example = () => {
const [ openDoor, setOpenDoor ] = useState(false);
// the following handler should swich 'openDoor' state to inverse of
// current state value. Then after setTimeout duration, inverse it again
const toggleOpenDoor = () => {
setOpenDoor(!openDoor);
// within setTimeout below, '!openDoor' does not work because it still
// receives the same value as above because of async nature of
// state updates
setTimeout(() => setOpenDoor(!openDoor), 500)
}
return(...);
}
In class based components, we had callback argument which would update state after previous update. How do I achieve the same in the above functional component using state hook?
I wonder if useEffect is the best solution. Specially when calling setTimeout within useEffect is going to cause an infinite loop since every time we call setOpenDoor, the app renders and then useEffect is called calling again a setTimeOut that will call a setOpenDoor function... Graphically:
setTimeout -> setOpenDoor -> useEffect -> setTimeout -> ... hell
Of course you could use an if statement wihin useEffect the same way that #ksav suggested but that does not accomplish one requirement of #Kayote:
I dont know the current value of state (it may be true/false)
Here is a solution that works without useEffect and accomplish the requirement stated above:
Code working in codesandbox
There, see the importance of this piece of code:
const toggleOpenDoor = () => {
setOpenDoor(!openDoor);
setTimeout(() => setOpenDoor(openDoor => !openDoor), 500);
};
Since we are using setTimeout, we need to pass callback to setOpenDoor instead of the updated state. This is because we want to send the 'current' state. If we sent the new state instead, by the time that setTimeOut processes that state, it will have changed (because we did it before setTimeOut executes its callback with setOpenDoor(!openDoor);) and no changes will be made.
You can use useEffect hook to see when the state change happend.
useEffect(() => {
// do something
console.log('openDoor change', openDoor)
}, [openDoor]);
I'll tell you that it works pretty much in the same way as this.setState, you just a pass a callback function which takes previous state as a parameter and returns new state(docs)
const Example = () => {
const [openDoor, setOpenDoor] = useState(false);
const toggleOpenDoor = () => {
setOpenDoor(!openDoor);
setTimeout(() => setOpenDoor(prevDoor => !prevDoor), 500)
}
return(...);
}
In order for you know when it changes you can use useEffect callback, which's gonna be called each time something changes in the dependencies array(docs)
const Example = () => {
const [openDoor, setOpenDoor] = useState(false);
useEffect(() => {
console.log('openDoor changed!', openDoor)
}, [openDoor])
const toggleOpenDoor = () => {
setOpenDoor(!openDoor);
setTimeout(() => setOpenDoor(prevDoor => !prevDoor), 500)
}
return(...);
}
:)
You can use useEffect hook to achieve this.
setOpenDoor(!openDoor);
useEffect(() => {
// Here your next setState function
}, [openDoor]);
For more information on hooks please check out https://reactjs.org/docs/hooks-effect.html
You should just using setTimeout within useEffect callback:
const App = () => {
const [openDoor, setOpenDoor] = useState(false);
const toggle = () => setOpenDoor(prevOpen => !prevOpen);
useEffect(() => {
const id = setTimeout(() => toggle(), 1000);
return () => clearTimeout(id);
}, [openDoor]);
return <Container>isOpen: {String(openDoor)}</Container>;
};
import React, { useState, useEffect } from "react";
const Example = () => {
const [openDoor, setOpenDoor] = useState(false);
const toggleOpenDoor = () => {
setOpenDoor(!openDoor);
};
useEffect(() => {
console.log(openDoor);
if (openDoor) {
setTimeout(() => setOpenDoor(!openDoor), 1500);
}
}, [openDoor]);
return (
<>
<button onClick={toggleOpenDoor}>Toggle</button>
<p>{`openDoor: ${openDoor}`}</p>
</>
);
};
export default Example;
Codesandbox