Proptypes for custom react hooks

Question

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.

Answer 1

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

Answer 2

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

Answer 3

In my opinion, using some kind of type mechanism would be better like TypeScript but if you don't you should still use propTypes and additionally you can check this course out from kentcdodds to be sure about propTypes usage https://egghead.io/courses/simplify-react-apps-with-react-hooks

Answer 4

The OP's approach has an issue in that the line const useTitle = title => { ... }; effectively makes title be the name of the parameter commonly named props. The useTitle.propTypes assignment, then, is not accurate.

The OP's approach, however, is viable (with modification). Below is an implementation showing how to use PropTypes with a custom hook:

MyHook.jsx:

import { useEffect } from 'react';
import PropTypes from 'prop-types';

const useMyHook= ({ callback, ref }) => {
    ...do something...
};

useMyHook.propTypes = {
    callback: PropTypes.func.isRequired,
    ref: PropTypes.element.isRequired
};

export { useMyHook };

MyComponent.jsx:

import React, { useRef } from 'react';
import { useMyHook} from '.../MyHook.jsx';

const MyComponent = props => {
    const myRef = useRef(null);
    const myCallback = () => console.log('Hello');

    useMyHook({ ref: myRef, callback, myCallback });

    return <div ref={myRef}>Stuff...</div>;
};

Answer 5

Typescript is the best way for validation and check props

import React from 'react';   

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

export default useTitle;

Or

import React from 'react';   

type customPropType= {
    title?:string
}

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

export default useTitle;