React.useState не перезагружает состояние из реквизита

Согласно Документация ReactJS о хуках :

But what happens if the friend prop changes while the component is on the screen? Our component would continue displaying the online status of a different friend. This is a bug. We would also cause a memory leak or crash when unmounting since the unsubscribe call would use the wrong friend ID.

Ваше единственное взаимодействие здесь должно происходить при смене реквизита, что, похоже, не работает. Вы можете (по-прежнему в соответствии с документом) использовать componentDidUpdate(prevProps) для упреждающего обнаружения любых обновлений реквизита.

PS: у меня недостаточно кода, чтобы судить, но не могли бы вы активно setUser() внутри вашей функции Avatar(props)?

Параметр, переданный в React.useState(), является только начальным значением для этого состояния. React не распознает это состояние как изменение, а только установит его значение по умолчанию. Сначала вы захотите установить состояние по умолчанию, а затем условно вызвать setUser(newValue), которое будет распознано как новое состояние, и выполнить повторную визуализацию компонента.

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

Аргумент, передаваемый в useState, является начальным состоянием, очень похожим на настройку состояния в конструкторе для компонента класса, и не используется для обновления состояния при повторном рендеринге.

Если вы хотите обновить состояние при изменении реквизита, используйте useEffect хук

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});

  React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

  return user.avatar ? 
         (<img src = {user.avatar}/>)
        : (<p>Loading...</p>);
}

Рабочая демонстрация

Функциональные компоненты, в которых мы используем useState для установки начальных значений нашей переменной, если мы передаем начальное значение через реквизит, оно всегда будет устанавливать одно и то же начальное значение, пока вы не используете useEffect хук,

например, ваш случай, это сделает вашу работу

 React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

Функция, переданная в useEffect, будет запущена после фиксации рендеринга на экране.

По умолчанию эффекты запускаются после каждого завершенного рендеринга, но вы можете активировать их только при изменении определенных значений.

React.useEffect(FunctionYouWantToRunAfterEveryRender)

если вы передадите только один аргумент в useEffect, он будет запускать этот метод после каждого рендеринга. вы можете решить, когда запускать этот FunctionYouWantToRunAfterEveryRender, передав второй аргумент в useEffect

React.useEffect(FunctionYouWantToRunAfterEveryRender, [props.user])

как вы заметили, я передаю [props.user] сейчас useEffect будет запускать эту FunctionYouWantToRunAfterEveryRender функцию только при изменении props.user

я надеюсь, что это поможет вашему пониманию дайте мне знать, если требуются какие-либо улучшения, спасибо

Я создал такие пользовательские хуки:

const usePrevious = value => {
   const ref = React.useRef();

   React.useEffect(() => {
       ref.current = value;
   }, [value]);

   return ref.current;
}

const usePropState = datas => {
    const [dataset, setDataset] = useState(datas);
    const prevDatas = usePrevious(datas);

    const handleChangeEventDataset = data => setDataset(data);

    React.useEffect(() => {
        if (!deepEqual(datas, prevDatas)) // deepEqual is my function to compare object/array using deep-equal
            setDataset(datas);
    }, [datas, prevDatas]);

    return [
        dataset,
        handleChangeEventDataset
    ]
}

Использовать:

const [state, setState] = usePropState(props.datas);

вы можете создать свои собственные простые хуки для этого. Хуки изменили значение по умолчанию, когда оно изменилось.

https://gist.github.com/mahmut-gundogdu/193ad830be31807ee4e232a05aeec1d8

    import {useEffect, useState} from 'react';

    export function useStateWithDep(defaultValue: any) {
      const [value, setValue] = useState(defaultValue);
    
      useEffect(() => {
        setValue(defaultValue);
      }, [defaultValue]);
      return [value, setValue];
    }

#Пример

const [user, setUser] = useStateWithDep(props.user);