如何知道是 props 发生了变化还是 useEffect 中的内部状态

Question

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]);

Answer 1

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]);