How to Use a Hook in a Class Component

Too Long; Didn't Read

You can't use hook directly in a class component, but you can use a hook in a wrapped function component with a render prop to achieve this. The beauty of this pattern is you can build new components as function components using hooks. Class components that can't be upgraded for whatever reason benefit from the same functionality via a thin compatibility layer, the wrapper component. Let's first create a hook that has a render prop called render that will expose the value and setter for the custom hook.