Почему изменение данных в хранилище данных приводит к изменению состояния компонента?

Question

Я борюсь с этим некоторое время сейчас. Я постараюсь описать это как можно проще. У меня есть два компонента. В первом случае (давайте назовем его родительским) у меня есть функция, которая получает один параметр, и она устанавливает это родительское состояние компонента вместе с ним. Также он выполняет некоторые действия, которые изменяют данные в хранилище резервов. Также я наблюдаю за изменениями в состоянии компонента, просто чтобы посмотреть, когда он изменится. Мне нужно вызвать эту функцию из другого компонента (пусть назвал его дочерним) и передать параметр. Параметр - это данные из избыточного хранилища, которые изменяются с помощью этой функции.

Родительский компонент:

const ParentComponent = (props) => {
    const [selectedUser, setSelectedUser] = useState({});

    const doSomething = (user) => {
        setSelectedUser(user)
        changeReduxStore(user);
    }

   // check if selected user has changed

   useEffect(() => {
      console.log('data changed')
   }, [selectedUser])

   return(
       <ChildComponent handleClick={doSomething}/>
   )
}

Дочерний компонент:

const ChildComponent = (props) => {

   return(
       <div onClick={() => props.handleClick(props.user)}/>Trigger click</div>
   )
}

Проблема заключается в том, что при запускеэта функция, состояние selectedUser изменяется два раза, а консольное сообщение «данные изменено» записывает два раза, и ему нужен только один. Похоже, что когда функция является триггером, она устанавливает состояние родительского компонента и изменяет данные в хранилище избыточных данных, а когда данные в хранилище избыточных данных изменяются, рендеринг дочерних компонентов (что совершенно нормально, так как дочерние компоненты получают эти данные как реквизиты) и каким-то образом при рендеринге изменяет состояниеснова родительский компонент, но он не вызывает эту функцию снова.

Я уже пытался сделать что-то подобное, но он также изменяет selectedUser два раза.

 const ChildComponent = (props) => {

     const callFunction = () => {
         props.handleClick(props.user)
     }

     return(
        <div onClick={callFuncion}/>Trigger click</div>
     )
 }