Don't Call PropTypes Warning

Note:

React.PropTypes foi movido para um pacote diferente desde a versão v15.5. do React. Por favor, use the prop-types library agora.

Nós fornecemos um script de migração para automatizar o processo.

Em releases futuras do React, o código que implementa a validação de PropType será removida. Uma vez isso acontecendo, qualquer código que contenha essas funções chamadas de forma manual irão emitir um erro.

Declarar PropTypes ainda é uma boa ideia

A forma normal de usar a PropTypes ainda é suportada:

Button.propTypes = {
  highlighted: PropTypes.bool
};

Nada mudou por aqui.

Não chame PropTypes diretamente

Usar PropTypes de uma forma diferente que não seja a anotação dos componentes React não é mais suportado:

var apiShape = PropTypes.shape({
  body: PropTypes.object,
  statusCode: PropTypes.number.isRequired
}).isRequired;

// Não suportado
var error = apiShape(json, 'response');

Caso você dependa do uso PropTypes dessa forma, encorajamos você a usar ou criar um fork da PropTypes (como esses dois pacotes).

Se você não corrigir esse alerta, esse código não funcionará em produção com o React 16.

Se você não chama PropTypes diretamente mas mesmo assim recebe esse alerta

Inspecione a stack trace produzida pelo alerta. Você encontrará a definição do componente responsável pela chamada direta da PropTypes. Provavelmente, o problema é causado por uma PropTypes de terceiros que encapsula a PropTypes do React, por exemplo:

Button.propTypes = {
  highlighted: ThirdPartyPropTypes.deprecated(
    PropTypes.bool,
    'Use `active` prop ao invés disso'
  )
}

Nesse caso, ThirdPartyPropTypes.deprecated é um wrapper chamando PropTypes.bool. Esse padrão por si só já é o suficiente, mas dispara um falso positivo pelo fato do React pensar que está chamando diretamente a PropTypes. No próximo tópico, iremos explicar como resolver esse problema para a implementação de uma biblioteca, algo como ThirdPartyPropTypes. Caso não seja uma biblioteca que você escreveu, você pode abrir um issue por isso.

Resolvendo o falso positivo em uma PropTypes de terceiro

Se você é o autor de uma biblioteca terceira com PropTypes e permite que seus usuários façam wrap de uma React PropTypes existente, provavelmente eles começarão a receber esse warning da sua biblioteca. Isso acontece porque o React não enxerga um último parâmetro “secreto” que passa a detectar manualmente as chamadas da PropTypes.

Aqui está como corrigir isso. Usaremos deprecated daqui react-bootstrap/react-prop-types como exemplo. A atual implementação só passa adiante as props, propName, and componentName arguments:

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName) {
    if (props[propName] != null) {
      const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName);
  };
}

Para resolver o falso positivo, tenha certeza que está passando todos os parâmetro para o wrapped da PropType. Um jeito fácil de fazer isso com ES6 é usando a notação ...rest:

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName, ...rest) { // Note ...rest here
    if (props[propName] != null) {
      const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName, ...rest); // and here
  };
}

Isso fará com que o warning pare de ser lançado.