Embracing the Future of React: A Guide to Migrating from HOCs to Hooks

Understanding HOCs

A Higher-Order Component (HOC) is a function that accepts a component and returns a new component with additional props or capabilities. HOCs provide a way to reuse logic across multiple components, making them a valuable tool in any React developer’s toolkit.

Creating HOCs from Your Hooks

Converting your hooks into HOCs provides a migration path that allows you to use your hook logic in class components. By doing so, you can start using new code in old components without rewriting complex logic.

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

This example shows how to create a HOC that provides a hook API. The withMyHook function receives a component as an argument and returns a new function component. This function component calls the useMyHook hook and passes any return values to the passed component.

Creating Hooks from Your HOCs

As you continue to refactor your app, you may want to migrate away from HOCs and recreate your existing shared logic as hooks. The biggest challenge in rewriting your HOCs and render prop-based components to hooks is the change in paradigms.

For example, suppose you have a utility that provides the current screen size to your component. You can implement this with hooks by storing the width and height via the useState hook and initializing it to be the window dimensions while mounting the component.

function useScreenSize() {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);

  useEffect(() => {
    const updateScreenSize = () => {
      setWidth(window.innerWidth);
      setHeight(window.innerHeight);
    };
    window.addEventListener('resize', updateScreenSize);
    return () => {
      window.removeEventListener('resize', updateScreenSize);
    };
  }, []);

  return { width, height };
}

In this example, we use the useState hook to store the width and height, and the useEffect hook to update the values when the window is resized.

Conclusion

By embracing these new techniques, you’ll be well on your way to creating more efficient, effective, and scalable React applications. Remember to:

• Create HOCs from your hooks to provide a migration path for class components.
• Refactor your existing HOCs to be hooks, thinking in terms of renders and prop changes.

Start exploring the world of Hooks today and take advantage of their simplicity and power!