Refactor a render Prop Component to a Custom React Hook
Our <Query /> component is a render prop based component that the <User /> component uses. But because it doesn't render anything, we can actually just change it to a custom hook. Let's create a useQuery hook that returns the state from the hooks the Query component uses and use that instead. But we'll preserve the component so we don't have to refactor everywhere that uses the Query render prop based component as well and we can keep our tests passing as they are.
Great course as always, two points I would like to ask you expand on if you ever had time:
- getFooProps pattern (from your previous course) with hooks
- examples of useMemo to optimize components
Again, thank you and looking forward to your next videos!
Another thing - how would you handle defaultProps, propTypes etc for React functions that return state (these don't seem to work)?
Hi Platon! You mean how do you use propTypes and defaultProps for custom hooks?
For propTypes I recommend using TypeScript or Flow instead.
For defaultProps, use default values, just like we do with the normalize function here:
function useQuery({query, variables, normalize = data => data}) {
// ...
}I hope that helps.
Thanks, that helped.
Have you thought of making some educational material on implementing the getProps pattern from your previous course with hooks, or the useMemo for optimizing components with the return state (along with component as default export) pattern from this course?
Cheers!