Как описать ref, который получаем из forwardRef в propTypes?

Question

[ivanDoligov]

Добрый день! Подскажите пожалуйста, получаю ошибку

Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

если у меня в приложении используется propTypes, то как тогда избежать этого предупреждения?

Comments

[Mikhail Osher]

Код в студию

[ivanDoligov]

Mikhail Osher, Ага, отправил

[Mikhail Osher]

ivanDoligov, https://stackoverflow.com/a/59790786 такое пишут

[ivanDoligov]

Mikhail Osher, пробовал, не помогло) сюда пришел

Answer 1

[Сергей Сунцев]

Все написанно в самом предупреждении
Предупреждение: функции рендеринга forwardRef не поддерживают propTypes или defaultProps.
Или уберите propTypes, или не используйте рефы.

Comments

[ivanDoligov]

я обернул по другому, вот так

const List = React.forwardRef((props, ref) => {
  return (
    <Button
      {...props}
      ref={ref}
    />
  );
});

export default React.memo(List);

ошибка исчезла...

[Сергей Сунцев]

ivanDoligov, Логично.
Если вам нужна какая то особенная логика ререндера, то в memo можете отправлять вторым параметром функцию сравнения, в которой будет логика перерисовок. Таким образом не пораждая кучу оберток.

[ivanDoligov]

Сергей Сунцев, А можете пожалуйста здесь пример показать (на моем примере), что мне нужно передать в функцию, чтобы не было дополнительной обертки?

[Сергей Сунцев]

ivanDoligov,
Что то типа такого

const customComponent =  memo(forwardRef(({ myProp }, ref) => {
  // ...
}))
customComponent.propTypes = { prop: PropTypes.number}
default export customComponent;

Answer 2

[ivanDoligov]

const List = (props, ref) => {
  return (
    <Button
      {...props}
      ref={ref}
    />
  );
}

export default React.memo(React.forwardRef(List));