I have a component with inner state that I want to update its initial state using props so I have to watch the props too. however I'd like to know when its the props that changed so that I run the function related to it once and keep it away from the inner component state.\
This is because I am unable to properly update the inner state as that thing will always run everytime the useEffect triggers
the following useEffect is for a Modal that I am setting visible or not from the parent component state(so its always mounted).
useEffect(() => {
// I want to run the following once
if (Object.getOwnPropertyNames(propState).length !== 0) {
console.log(propState);
setState(()=> {
innerState = propState.user_name
});
}
}, [propState, innerState]);
You can check value in inner state and propState. If they equal, when skip setState.
useEffect(() => {
if (propState?.user_name && propState !== innerState.user_name) {
setState(()=> {
innerState = propState.user_name
});
}
}, [propState, innerState]);