Did you know that you can use in ? hooks class components OK, I'm lying, kind of. You can't use a hook directly in a class component, but you can use a hook in a wrapped function component with a to achieve this. render prop Before going ahead with this, if you're able to convert your class component to a function component, prefer that. But if the component needs to remain a class component for whatever reason, this pattern works great. You will most likely encounter this scenario when working on a mature React codebase. 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. import { useEffect, useState } from "react";

export function useDarkMode() {
  // Taken from https://usehooks.com/useDarkMode/

  // For this to persist, we'd use localStorage or some other kind
  // of way to persist between sessions.
  // see e.g. https://usehooks.com/useLocalStorage/
  const [enabledState, setEnabledState] = useState(false);
  const enabled = enabledState;

  useEffect(() => {
    const className = "dark-mode";
    const element = document.body;
    if (enabled) {
      element.classList.add(className);
    } else {
      element.classList.remove(className);
    }
  }, [enabled]);
  return [enabled, setEnabledState];
} Now let's create a function component that has a render prop. Note that the prop does not literally need to be called , but it tends to convey its purpose. render // I wouldn't normally call a component something like this.
// It's just to convey what it is doing for the purpose of the article
const UseDarkModeHookWrapperComponent = ({ render }) => {
  const [darkMode, setDarkMode] = useDarkMode(false);

  // Uses the render prop called render that will expose the value and
  // setter for the custom hook
  return render(darkMode, setDarkMode);
}; And now, let's use the wrapper component in a class component. export default class App extends Component {
  render() {
    return (
      <UseDarkModeHookWrapperComponent
        render={(darkMode, setDarkMode) => {
          return (
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "200px",
                gap: "2rem",
                maxWidth: "50%",
                placeItems: "center"
              }}
            >
              <ThemeToggler darkMode={darkMode} setDarkMode={setDarkMode} />
              hello
            </div>
          );
        }}
      />
    );
  }
} And voilà! You're using your hook in a class component. Here's the . complete application in action If you want to see a real-world example, look no further than the Forem codebase. Here's the , and here's the . If you want to see it in action, it's called in the . useMediaQuery hook wrapper component ReadingList component Photo by on Jamie Matociños Unsplash Also Published Here

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Developer

2022 - HackerNoon Contributor of the Year - Product Development

Super Career Strategist of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Developer

Nominated for Super Career Strategist of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - HackerNoon Contributor of the Year - Product Development

Too Long; Didn't Read

How to Use a Hook in a Class Component

How to Use a Hook in a Class Component

Too Long; Didn't Read

Company Mentioned

@nickytonline

RELATED STORIES