react: как в функциональном компоненте понять, что было изменено значение атрибута

Question

есть функциональный компонент React Header:

const Header = (props) => {
    [value, setValue] = useState(() => {
        console.log('создание компонента');
        return props.attr;
    });

    return <div>{value}</div>

который вызывается так:

<Header attr={attr} />

Как я понимаю, в Header useState вызовется лишь 1 раз, когда данный компонент будет создан. Если будет меняется значение attr повторных вызовов осуществляться не будет (ведь компонент оставался на месте)

Подскажите, а как ВНУТРИ компонента Header можно понять, что произошло изменение атрибутов (т.е. новые пропсы отличаются от старых) и сделать какие-то действия, не связанные с отрисовкой (обработать данные и т.п.)?

Т.е. вся логика должна быть только внутри компонента Header, снаружи только меняются атрибуты и все.

Answer 1

Для этого вам нужно использовать useEffect документация

const Header = (props) => {
    [value, setValue] = useState(() => {
        console.log('создание компонента');
        return props.attr;
    });

    useEffect(() => {
        console.log('new props');
    }, [props.attr]);
    
    return <div>{value}</div>
    }

БЛОГ НА HUSL

react: как в функциональном компоненте понять, что было изменено значение атрибута

Ответы (1 шт):