React: How to skip useEffect on first render [duplicate]

You can see this answer for an approach of how to ignore the initial render. This approach uses useRef to keep track of the first render.

 const firstUpdate = useRef(true); useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false; } else { // do things after first render } }); 

As for the warning you were getting:

React Hook useEffect has a missing dependency: 'onChange'

The trailing array in a hook invocation (useEffect(() => {}, [foo]) list the dependencies of the hook. This means if you are using a variable within the scope of the hook that can change based on changes to the component (say a property of the component) it needs to be listed there.

If you are looking for something like componentDidUpdate() without going through componentDidMount(), you can write a hook like:

export const useComponentDidMount = () => { const ref = useRef(); useEffect(() => { ref.current = true; }, []); return ref.current; }; 

In your component you can use it like:

const isComponentMounted = useComponentDidMount(); useEffect(() => { if(isComponentMounted) { // Do something } }, [someValue]) 

In your case it will be:

const DummyForm = ({dummy, onChange}) => { const isComponentMounted = useComponentDidMount(); const {value: foo, binding: fooBinding} = useFormInput(dummy.value) const {value: bar, binding: barBinding} = useFormInput(dummy.value) // This should run only after the initial render when user edits inputs useEffect(() => { if(isComponentMounted) { console.log("onChange callback") onChange({foo, bar}) } }, [foo, bar]) return ( // code ) } 

Let me know if it helps.

I create a simple hook for this

https://stackblitz.com/edit/react-skip-first-render?file=index.js

It is based on paruchuri-p

const useSkipFirstRender = (fn, args) => { const isMounted = useRef(false); useEffect(() => { if (isMounted.current) { console.log('running') return fn(); } }, args) useEffect(() => { isMounted.current = true }, []) } 

The first effect is the main one as if you were using it in your component. It will run, discover that isMounted isn't true and will just skip doing anything.

Then after the bottom useEffect is run, it will change the isMounted to true - thus when the component is forced into a re-render. It will allow the first useEffect to render normally.

It just makes a nice self-encapsulated re-usable hook. Obviously you can change the name, it's up to you.

You can use custom hook to run use effect after mount.

const useEffectAfterMount = (cb, dependencies) => { const mounted = useRef(true); useEffect(() => { if (!mounted.current) { return cb(); } mounted.current = false; }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps }; 

Here is the typescript version:

const useEffectAfterMount = (cb: EffectCallback, dependencies: DependencyList | undefined) => { const mounted = useRef(true); useEffect(() => { if (!mounted.current) { return cb(); } mounted.current = false; }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps }; 

Example:

useEffectAfterMount(() => { console.log("onChange callback") onChange({foo, bar}) }, [count]) 

I don't understand why you need a useEffect here in the first place. Your form inputs should almost certainly be controlled input components where the current value of the form is provided as a prop and the form simply provides an onChange handler. The current values of the form should be stored in <App>, otherwise how ever will you get access to the value of the form from somewhere else in your application?

const DummyForm = ({valueOne, updateOne, valueTwo, updateTwo}) => { return ( <div> <input type="text" value={valueOne} onChange={updateOne} /> <div>{valueOne}</div> <input type="text" value={valueTwo} onChange={updateTwo} /> <div>{valueTwo}</div> </div> ) } function App() { const [inputOne, setInputOne] = useState(""); const [inputTwo, setInputTwo] = useState(""); return ( <div className="App"> <header className="App-header"> <DummyForm valueOne={inputOne} updateOne={(e) => { setInputOne(e.target.value); }} valueTwo={inputTwo} updateTwo={(e) => { setInputTwo(e.target.value); }} /> </header> </div> ); } 

Much cleaner, simpler, flexible, utilizes standard React patterns, and no useEffect required.