We Keep Coding

Wait for change of prop from parent component after changing it from a child in React

I have rewritten a Child class component in React to a functional component. Here is the simplified code example.
For sure, as so often, this is a simplified code and more things are done with the value in the parent component. That's why we have and need it there.
const Parent = (props) => {
const [value, setValue] = useState(null);
const handleChange = (newValue) => {
// do something with newValue and probably change it
// store the result in `newChangedValue`
setValue(newChangedValue);
}
return (
<Child value={value} onChange={handleChange}/>
);
}
const Child = (props) => {
const {value} = props;
// This solution does not work for me,
// because it's always triggered, when
// `value` changes. I only want to trigger
// `logValueFromProp` after clicking the
// Button.
useEffect(() => {
logValueFromProp();
}, [value]);
const handleClick = () => {
// some calculations to get `newValue`
// are happening here
props.onChange(newValue);
logValueFromProp();
}
const logValueFromProp = () {
console.log(prop.value);
}
return (
<Button onClick={handleClick} />
);
}
What I want to do is to log a properties value, but only if it got changed by clicking the button. So just using a useEffect does not work for me.
Before changing the child component to a functional component, the property had its new value before I was calling logValueFromProp(). Afterwards it doesn't. I guess that's cause of some timing, and I was just lucky that the property was updated before the function was called.
So the question is: How would you solve this situation? One solution I thought of was a state in the child component which I set when the button is clicked and in the useEffect I only call the function when the state is set and then reset the state. But that doesn't feel like the optimal solution to me...

Three possible solutions for you
Pass logValueFromProp the value directly — but in a comment you've explained that the value might be modified slightly by the parent component before being set on the child, which would make this not applicable.
Use a flag in a ref. But if the parent doesn't always change the prop, that would be unreliable.
Have the parent accept a callback in its handleChange.
#1
If possible, I'd pass the value directly to logValueFromProp when you want to log it. That's the simple, direct solution:
const Child = (props) => {
const {value} = props;
const handleClick = () => {
props.onChange(newValue);
logValueFromProp(newValue);
};
const logValueFromProp = (newValue = prop.value) {
console.log(newValue);
};
return (
<Button onClick={handleClick} />
);
};
But in a comment you've said the new value may not be exactly the same as what you called props.onChange with.
#2
You could use a ref to remember whether you want to log it when the component function is next called (which will presumably be after it changes):
const Child = (props) => {
const {value} = props;
const logValueRef = useRef(false);
if (logValueRef.current) {
logValueFromProp();
logValueRef.current = false;
}
const handleClick = () => {
props.onChange(newValue);
logValueRef.current = true;
};
const logValueFromProp = () {
console.log(prop.value);
};
return (
<Button onClick={handleClick} />
);
};
Using a ref instead of a state member means that when you clear the flag, it doesn't cause a re-render. (Your component function is only called after handleClick because the parent changes the value prop.)
Beware that if the parent component doesn't change the value when you call prop.onChange, the ref flag will remain set and then your component will mistakenly log the next changed value even if it isn't from the button. For that reason, it might make sense to try to move the logging to the parent, which knows how it responds to onChange.
#3
Given the issues with both of the above, the most robust solution would seem to be to modify Parent's handleChange so that it calls a callback with the possibly-modified value:
const Parent = (props) => {
const [value, setValue] = useState(null);
const handleChange = (newValue, callback) => {
// ^^^^^^^^^^−−−−−−−−−−−−−−−−− ***
// do something with newValue and probably change it
// store the result in `newChangedValue`
setValue(newChangedValue);
if (callback) { // ***
callback(newChangedValue); // ***
} // ***
};
return (
<Child value={value} onChange={handleChange}/>
);
};
const Child = (props) => {
const {value} = props;
const handleClick = () => {
props.onChange(newValue, logValueFromProp);
// ^^^^^^^^^^^^^^^^^^−−−−−−−−−−−−−− ***
}
const logValueFromProp = () {
console.log(prop.value);
};
return (
<Button onClick={handleClick} />
);
};

This answer is based upon the answer of T.J. Crowder (#2).
You can create a custom hook that accepts a callback and dependencies. And returns a function that will trigger a re-render (by using useState instead of useContext) calling the callback in the process.
I've enhanced his answer by allowing you to pass a dependency array which will be used to determine if the callback is called. If the dependency array is omitted, the callback is always called. When passed, the callback is only called if there was a change in the dependency array.
I went for the name useTrigger in the example below, but depending on preference you might like another name better. For example useChange.
const { useState, useCallback } = React;
const useTrigger = (function () {
function zip(a1, a2) {
return a1.map((_, i) => [a1[i], a2[i]]);
}
// compares 2 arrays assuming the length is the same
function equals(a1, a2) {
return zip(a1, a2).every(([e1, e2]) => Object.is(e1, e2));
}
return function (callback, deps) {
const [trigger, setTrigger] = useState(null);
if (trigger) {
if (!deps || !equals(deps, trigger.deps)) {
callback(...trigger.args);
}
setTrigger(null);
}
return useCallback((...args) => {
setTrigger({ args, deps });
}, deps);
}
})();
function Parent() {
const [value, setValue] = useState(null);
function handleChange(newValue) {
// Sometimes the value is changed, triggering `logValueFromProp()`.
// Sometimes it isn't.
if (Math.random() < 0.66) newValue++;
setValue(newValue);
}
return <Child value={value} onChange={handleChange} />;
}
function Child({ value, onChange }) {
const logValueFromProp = useTrigger(() => {
console.log(value);
}, [value]);
function handleClick() {
onChange(value || 0);
logValueFromProp();
}
return (
<button onClick={handleClick}>
Click Me!
</button>
);
}
ReactDOM.render(<Parent />, document.querySelector("#demo"));
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<div id="demo"></div>

Infinite render caused by child component taking props from parent

I have a component which fetches data and then passes props to a child child component.
This causes and infinite re-render caused by child component. I wonder what is happening
Here is how my code looks like
const Page: FunctionComponent<pageProps> = (): JSX.Element => {
const [userInfo, setUserInfo] = useState<userInfoStruct>();
const [data, setData] = useState<any>();
useEffect(() => {
// fetch info from localstore
setUserInfo(dataFromLocalStorage);
fetchSomeData(); // do stuff... and setData(fetchResult)
}, [userInfo]);
return (
<div>
<ButtonsAndStuff />
<DisplayData data={data} />
</div>
)
};
My child component looks something like this
const DisplayData: FunctionComponent<displayDataProps> = ({ data }): JSX.Element => {
const data_: Array<any> = data.map(d => (d.value))
return (
<div>
{data_.map(i => {
return (
<div>
{i}
</div>
)
})}
</div>
)
};
Unfortunately my component continually re-renders and react says the problem comes from my child component specifically at the level of taking props in the child i.e this line
const DisplayData: FunctionComponent<displayDataProps> = ({ data }): JSX.Element => {/*... */};
I don't know what is going wrong at this point.
temp
useEffect(() => {
let userName: string = localStorage.getItem("userName");
let user: string = localStorage.getItem("user");
if (userName === undefined || user === undefined) {
return;
} else {
setUserInfo({ user: user, userName: userName });
setIsAuth(true);
}
/* */
if (blogData.length < 1) {
fetchBlogData(user, blogIndex).then(result => {
console.log(result)
setBlogData(result);
});
} else {
return;
}
/* */
}, []);

Your problem doesn't seem to be caused by your child component, but by this part of your code:
const [userInfo, setUserInfo] = useState<userInfoStruct>();
const [data, setData] = useState<any>();
useEffect(() => {
// fetch info from localstore
setUserInfo(dataFromLocalStorage);
fetchSomeData(); // do stuff... and setData(fetchResult)
}, [userInfo]);
Assuming that dataFromLocalStorage isn't just a string/number, it's probably a unique array/object every time. You alter userInfo, which therefore makes the [userInfo] dependency list change, therefore re-executing your effect, ad infinitum.
If you only want to execute the effect once, use [] as dependency list.

Update the sibling component only

In the code below, how can I update only Component B and not Component A (or the Parent Component)
Component A:
const A = ({ data, clickCallback }) => {
console.debug('A');
return (<button onClick={clickCallback}>Component A</button>)
};
Component B:
const B = ({ filteredData }) => {
console.debug('B');
return <h1>Component B: {filteredData}</h1>;
};
Parent Component:
function Parent() {
console.debug('parent');
const [data, setData] = useState(0);
const handleClick = () => {
setData(data + 1);
};
return (
<div>
<A clickCallback={handleClick}/>
<B filteredData={data} />
</div>
);
}
So when clicking on the Component A button, I only see console.debug('B') in the console?
parent
A
B
B
B
...
Here is the link to the working code: https://codesandbox.io/s/musing-lehmann-kme8d?file=/src/index.js:233-245
NOTE: I have tried wrapping the handleClick inside a useCallback() but, still in the console I see:
parent
A
B
parent
A
B
...

With functional components, they are rerendered when their parent component rerenders. I.E. When Parent rerenders, then both A and B` will be rerendered in the "render phase" in order to compute a diff. This should not be confused with rendering to the DOM during the "commit phase".
You can wrap A in the memo Higher Order Component and pass a custom equality function that returns true/false if the previous and next props are equal.
memo
By default it will only shallowly compare complex objects in the props
object. If you want control over the comparison, you can also provide
a custom comparison function as the second argument.
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);
I suggest also correctly console logging in an useEffect so you truly know when the component is rerendered to the DOM.
A functional state update should also be used to update the data state so the state value isn't closed over in the callback scope.
const A = ({ data, clickCallback }) => {
useEffect(() => {
console.debug("A");
});
return <button onClick={clickCallback}>Component A</button>;
};
const MemoA = memo(
A,
(prevProps, nextProps) => prevProps.data === nextProps.data
);
const B = ({ filteredData }) => {
useEffect(() => {
console.debug("B");
});
return <h1>Component B: {filteredData}</h1>;
};
function Parent() {
useEffect(() => {
console.debug("parent");
});
const [data, setData] = useState(0);
const handleClick = () => {
setData(data => data + 1); // <-- functional update
};
return (
<div>
<MemoA clickCallback={handleClick} />
<B filteredData={data} />
</div>
);
}

Why the props that are passed to memo are don't store the value

I am trying to optimize my React list rendering using the React memo feature of manual props comparison. I have generated a list of simple "toggle" buttons:
import React, { useState } from "react";
import "./styles.css";
import { Toggle } from "./Toggle";
export default function App() {
const [list, setList] = useState({ a: true, b: true, c: true });
const handleClick = x => {
console.log(list);
const currentValue = list[x];
setList({ ...list, [x]: !currentValue });
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{Object.keys(list).map(x => (
<Toggle key={x} isChecked={list[x]} name={x} onChange={handleClick} />
))}
</div>
);
}
This is the "toggle" button:
import React from "react";
const areEqual = (prevProps, nextProps) => {
return prevProps.isChecked === nextProps.isChecked;
};
const ToggleComponent = ({ isChecked, name, onChange }) => {
return (
<>
<h1>{isChecked ? "This is true" : "This is false"}</h1>
<button onClick={() => onChange(name)}>{name}</button>
</>
);
};
export const Toggle = React.memo(ToggleComponent, areEqual);
My issue is that the list object actually doesn't store the expected value. Every time I click on the buttons I get the same, default one { a: true, b: true, c: true } (it is visible in the console.log of handleClick), but if I delete the areEqual function, everything works properly again and the list object is updated as it should be.
Code Sandbox example
EDIT:
I saw that if I change the whole thing into an array and wrap every button into an object, the memo feature works as intended.
Code Sandbox example with array

It is because the handleClick function is created and passed once to a Toggle Component.
And handleClick's closure contains the old list value, so whenever the old value change it doesn't get updated.
The easiest fix is to benefit from the second signature of the state updater: a function that accepts in parameter the old state value.
So whenever it is called, react will pass the old state value to it.
const handleClick = x => {
setList(old => ({ ...old, [x]: !old[x] }));
};
You also need to memoize the handleClick function, because it is recreated at each render of the component holding the state:
const handleClick = React.useCallback(x => {
setList(old => ({ ...old, [x]: !old[x] }));
}, [setList]);
Here is working codesandbox

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

This question already has answers here:
Make React useEffect hook not run on initial render
(16 answers)
Closed last month.
I'm trying to use the useEffect hook inside a controlled form component to inform the parent component whenever the form content is changed by user and return the DTO of the form content. Here is my current attempt
const useFormInput = initialValue => {
const [value, setValue] = useState(initialValue)
const onChange = ({target}) => {
console.log("onChange")
setValue(target.value)
}
return { value, setValue, binding: { value, onChange }}
}
useFormInput.propTypes = {
initialValue: PropTypes.any
}
const DummyForm = ({dummy, onChange}) => {
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(() => {
console.log("onChange callback")
onChange({foo, bar})
}, [foo, bar])
return (
<div>
<input type="text" {...fooBinding} />
<div>{foo}</div>
<input type="text" {...barBinding} />
<div>{bar}</div>
</div>
)
}
function App() {
return (
<div className="App">
<header className="App-header">
<DummyForm dummy={{value: "Initial"}} onChange={(dummy) => console.log(dummy)} />
</header>
</div>
);
}
However, now the effect is ran on the first render, when the initial values are set during mount. How do I avoid that?
Here are the current logs of loading the page and subsequently editing both fields. I also wonder why I get that warning of missing dependency.
onChange callback
App.js:136 {foo: "Initial", bar: "Initial"}
backend.js:1 ./src/App.js
Line 118: React Hook useEffect has a missing dependency: 'onChange'. Either include it or remove the dependency array. If 'onChange' changes too often, find the parent component that defines it and wrap that definition in useCallback react-hooks/exhaustive-deps
r # backend.js:1
printWarnings # webpackHotDevClient.js:120
handleWarnings # webpackHotDevClient.js:125
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage # webpackHotDevClient.js:190
push../node_modules/sockjs-client/lib/event/eventtarget.js.EventTarget.dispatchEvent # eventtarget.js:56
(anonymous) # main.js:282
push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage # main.js:280
push../node_modules/sockjs-client/lib/event/emitter.js.EventEmitter.emit # emitter.js:53
WebSocketTransport.ws.onmessage # websocket.js:36
App.js:99 onChange
App.js:116 onChange callback
App.js:136 {foo: "Initial1", bar: "Initial"}
App.js:99 onChange
App.js:116 onChange callback
App.js:136 {foo: "Initial1", bar: "Initial2"}

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.