prevent useEffect to fire on initial render

Question

I want to do a debounce for custom input, but my problem is I can't stop useEffect from trigger on initial render

import { useDebouncedCallback } from "use-debounce"; interface myInputProps { getValue: any; } const MyInput = ({ getValue }: myInputProps) => { const [value, setValue] = useState(""); React.useEffect(() => { getValue(value); }, [value]); return ( <input type="text" value={value} onChange={e => setValue(e.target.value)} /> ); }; export default function App() { const [debouncedCallback] = useDebouncedCallback(value => { console.log(value); }, 1000); return ( <div className="App"> <MyInput getValue={debouncedCallback} /> </div> ); }

https://codesandbox.io/s/upbeat-lamport-ukq70?file=/src/App.tsx

I've also tried useLayoutEffect but it doesn't solve the problem.

did you try using useRef?

joy08
– joy08

2020-04-10 07:34:38 +00:00
Commented Apr 10, 2020 at 7:34 — joy08
– joy08, Commented Apr 10, 2020 at 7:34

joy08 · Accepted Answer · 2020-04-10 07:36:47Z

We could use useRef to keep track of if it's the first time the useEffect hook is being run.

https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

Sandbox link: https://codesandbox.io/s/confident-cerf-flkf2?file=/src/App.tsx

 const MyInput = ({ getValue }: myInputProps) => { const [value, setValue] = useState(""); const first = useRef(true); React.useEffect(() => { if (first.current) { first.current = false; return; } getValue(value); }, [value]); return ( <input type="text" value={value} onChange={e => setValue(e.target.value)} /> ); };

It is not gonna work if you wanted it to reset the first on page reload/refresh. Any suggestion? like to let it to tell you that this is the first time that it rendered the component but after that as long as you have not refreshed the page it should not change it to true. But if you refreshed/reload the page it is gonna change to true. But right now it is not like that (I tested it)

xdeepakv · Accepted Answer · 2020-04-10 08:06:15Z

Set initial value to undefined and you can explicitly check for undefined. Once the user enter, it won't be undefined.

const MyInput = ({ getValue }: myInputProps) => { const [value, setValue] = useState(undefined); React.useEffect(() => { if (value === undefined) { return; } getValue(value); }, [value]); return ( <input type="text" value={value} onChange={e => setValue(e.target.value)} /> ); };

Collectives™ on Stack Overflow

prevent useEffect to fire on initial render

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related