40 lines
1.0 KiB
Markdown
40 lines
1.0 KiB
Markdown
---
|
|
title: React useEffectOnce hook
|
|
tags: hooks,effect
|
|
author: chalarangelo
|
|
cover: pop-of-green
|
|
firstSeen: 2021-11-16T05:00:00-04:00
|
|
---
|
|
|
|
Runs a callback at most once when a condition becomes true.
|
|
|
|
- Use the `useRef()` hook to create a variable, `hasRunOnce`, to keep track of the execution status of the effect.
|
|
- Use the `useEffect()` that runs only when the `when` condition changes.
|
|
- Check if `when` is `true` and the effect has not executed before. If both are `true`, run `callback` and set `hasRunOnce` to `true`.
|
|
|
|
```jsx
|
|
const useEffectOnce = (callback, when) => {
|
|
const hasRunOnce = React.useRef(false);
|
|
React.useEffect(() => {
|
|
if (when && !hasRunOnce.current) {
|
|
callback();
|
|
hasRunOnce.current = true;
|
|
}
|
|
}, [when]);
|
|
};
|
|
```
|
|
|
|
```jsx
|
|
const App = () => {
|
|
const [clicked, setClicked] = React.useState(false);
|
|
useEffectOnce(() => {
|
|
console.log('mounted');
|
|
}, clicked);
|
|
return <button onClick={() => setClicked(true)}>Click me</button>;
|
|
};
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
<App />
|
|
);
|
|
```
|