One of my biggest pet peeves with React prop-types is the weak prop validation for function props.
Example.propTypes = {
onClick: PropTypes.func,
onChange: PropTypes.func,
onSelect: PropTypes.func,
}
Are any parameter passed to onClick? How many arguments are passed to onChange? Will I get the event object with onSelect? We have to rely on really good docs (😂) or looking at the source code to know what sort of function we can pass to function props.
And it's even more confusing with "inversion of control" function props that are expected to return a value. This is when the child component provides some internal state to the parent component by calling a function prop, and uses the return value to render UI, maintain more additional state, etc.
One example of an "inversion of control" function prop is the render prop. The component defines a function prop, typically called render or children, passes internal state to the function, and renders the UI returned by the function. It allows the component abstract or consolidate stateful logic, but offload the UI to the caller.
TODO:
- Update the TS + React prop types posts w/ links to this and other related posts
Keep learning my friends. 🤓