How can I use React hooks in React classic `class` component?

by

High order components are how we have been doing this type of thing until hooks came along. You can write a simple high order component wrapper for your hook.

function withMyHook(Component) {
  return function WrappedComponent(props) {
    const myHookValue = useMyHook();
    return <Component {...props} myHookValue={myHookValue} />;
  }
}

While this isn’t truly using a hook directly from a class component, this will at least allow you to use the logic of your hook from a class component, without refactoring.

class MyComponent extends React.Component {
  render(){
    const myHookValue = this.props.myHookValue;
    return <div>{myHookValue}</div>;
  }
}

export default withMyHook(MyComponent);

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing
  3. How can I use multiple refs for an array of elements with hooks?
  4. Invalid hook call. Hooks can only be called inside of the body of a function component
  5. Can I set state inside a useEffect hook
  6. How to call an async function inside a UseEffect() in React?
  7. Why is useState not triggering re-render?
  8. Updating and merging state object using React useState() hook
  9. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  10. componentDidMount equivalent on a React function/Hooks component?
  11. How to register event with useEffect hooks?
  12. Is there a generic way to set state in React Hooks? How to manage multiple states?
  13. How do I update states `onChange` in an array of object in React Hooks
  14. React Function Components with hooks vs Class Components
  15. React hooks: accessing up-to-date state from within a callback
  16. React Hooks – What’s happening under the hood?
  17. useEffect does not listen for localStorage
  18. setTimeout for this.state vs useState
  19. Why need useRef and not mutable variable?
  20. Next.js context provider wrapping App component with page specific layout component giving undefined data
  21. Determine which dependency array variable caused useEffect hook to fire
  22. React hooks: call component as function vs render as element
  23. React hooks useState setValue still rerender one more time when value is equal
  24. Updating state to the same state directly in the component body
  25. React hook useEffect runs continuously forever/infinite loop
  26. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  27. Equivalent to componentDidUpdate using React hooks
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. Why would we use useEffect without a dependency array?

Leave a Comment