Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Proptypes for custom react hooks

Tags:

With react hooks coming, should we use prop-types for React custom hooks e.g,

import React from 'react';
import PropTypes from 'prop-types';    

const useTitle = title => {
  React.useEffect(() => {
    document.title = title;
  }, [title]);
}

useTitle.propTypes = {
  title: PropTypes.string.isRequired,
};

export default useTitle;

Is the above a good approach to validate the param(s) passed to a custom react hooks or should there be a different way for validation the props/params passed to custom hook which is basically just a simple function.

like image 678
Adeel Imran Avatar asked Jan 21 '19 19:01

Adeel Imran


People also ask

Is PropTypes deprecated?

5 PropTypes are deprecated in the React package and have been given a package of their own. Change is an inevitable part of life. The upshot is twofold. 1) If you use another type-checking mechanism, you don't have to worry about shipping unnecessary bulk to your end users.

Is PropTypes necessary in React?

Props and PropTypes are important mechanisms for passing read-only attributes between React components. We can use React props, short for properties, to send data from one component to another. If a component receives the wrong type of props, it can cause bugs and unexpected errors in your app.

How do you validate props in React Hooks?

React doesn't validate custom hooks or in-built hooks props. Look here for updateFunctionComponent, It validates prop types using checkPropTypes for a react component and then render it with hooks i.e. check out renderWithHooks .

Do I need PropTypes if I use TypeScript?

Building a component library This means users of your library cannot depend on your TypeScript type definitions for props, reiterating the relevance of PropTypes. PropTypes is normal JavaScript code, which means validations will also be possible when your library is being used.

What are ReactJS custom hooks?

Top 11 recommended ReactJS custom Hooks — with examples. Custom hooks leverage the power of React hooks to add additional functionality to our React apps.

Should a hook have a signature in react?

Just like in a component, make sure to only call other Hooks unconditionally at the top level of your custom Hook. Unlike a React component, a custom Hook doesn’t need to have a specific signature. We can decide what it takes as arguments, and what, if anything, it should return.

How to run typecheck on react props?

For some applications, you can use JavaScript extensions like Flow or TypeScript to typecheck your whole application. But even if you don’t use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special propTypes property:

What are react hooks and why should I Care?

They let you use state and other React features without writing a class. Building your own Hooks lets you extract component logic into reusable functions. When we were learning about using the Effect Hook, we saw this component from a chat application that displays a message indicating whether a friend is online or offline:


Video Answer


2 Answers

No. React doesn't validate custom hooks or in-built hooks props.

Look here for updateFunctionComponent, It validates prop types using checkPropTypes for a react component and then render it with hooks i.e. check out renderWithHooks.

Now if you check here in renderWithHooks method, It updates the dispatcher and calls your functional component which in turn calls your custom hook, since it's just another function call inside your functional component.

Your custom hook will call in-built hooks. You can check the implementation here . Based on type of dispatcher it will call built-in hooks. If you search checkPropTypes in the whole file you won't find the validation logic or prop-types/checkPropTypes dependency which is used to validate the prop types.

Here is some nice article about how react hooks works

like image 117
yugandhar kamdi Avatar answered Sep 27 '22 21:09

yugandhar kamdi


I'm using PropTypes.checkPropTypes for useSelector hook. And it works for me.

const useTitle = title => {
  React.useEffect(() => {
    document.title = withPropsValidation(title);
  }, [title]);
}

const withPropsValidation = props => {
  PropTypes.checkPropTypes(propTypes, props, 'prop', '')
  return props
}

const propTypes = {
  title: PropTypes.string.isRequired,
}

https://github.com/facebook/prop-types#proptypescheckproptypes

like image 25
J_Bon Avatar answered Sep 27 '22 21:09

J_Bon