Реагируйте с использованием forwardRef, всегда обновляйте дочерний компонент, даже используя memo

Question

Итак, у меня есть дочерний компонент DatePicker, который мне нужен для доступа к егоref через forwardRefот Родителя. В принципе все нормально работает.

Но есть одна проблема.

Каждый раз, когда я обновляю что-то в родительских компонентах Other ChildComponents, не имеющее никакого отношения к DatePickerChild, DatePicker все еще отображает, даже если этого не должно быть.

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

<NativeDatePicker
  ref={datePickerRef} // <-- When I comment this component is not rendering anymore.
  currentDate={values.birthday}
  onDateChange={handleBirthdayChange}
/>

Я уже начал использовать мемоизацию обратного вызова, используя useCallback оптимизировать, но все равно не повезло.

Вот мой код ниже:

DatePicker.tsx

type Props = {
  // ref: RefObject<DatePicker>;
  currentDate: string | Date | undefined;
  onDateChange: (newDate: string) => void;
};

const NativeDatePicker = forwardRef(
  ({ currentDate, onDateChange }: Props, ref: any) => {
    console.log('tadah!');
    return (
      <DatePicker
        ref={ref}
        style={wrapperStyle.wrapper}
        date={currentDate}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        // minDate="2016-05-01"
        // maxDate={Date.now()}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={styles}
        onDateChange={onDateChange}
      />
    );
  },
);

const MemoizedNativeDatePicker = memo(NativeDatePicker);

Я бы не показывал каждый код в моем ParentComponent, только те реквизиты и ссылки, которые я передаю в DatePicker.

 // Memoized Callback Function
 const handleBirthdayChange = useCallback(
    (newDate: string) => setFieldValue('birthday', newDate),
    [setFieldValue],
  );

 const datePickerRef = createRef<DatePicker>();
 const datePickerRefOnPress = () => datePickerRef.current!.onPressDate();

Я что-то пропустил? Спасибо за любую помощь.

Answer 1

Вы создаете реф, используя createRef, который при каждом повторном рендеринге будет возвращать вам новый экземпляр ref и, следовательно, приведет к сбою в оптимизации дочернего повторного рендеринга с помощью React.memo.

Вместо этого вы должны использоватьuseRef крючок для функционального компонента для создания ссылки

const datePickerRef = useRef<DatePicker>();