The Daily TIL

This line from the documentation straightforward enough:

Hooks don’t work inside classes — they let you use React without classes.

Cool, so use hooks in a function component. Everything seems to be working great when testing the component locally. But when inserted into a production environment, the terrifying

Hooks can only be called inside the body of a function component.

error is seen. In my case, this was due to the fact that Netlify CMS is using an older version of React and does not yet support hooks for custom CMS components. So even though the code I had written was hook-complient, it did not work when combined with the rest of the ecosystem.

But all is not lost. I attempted to refactor my CMS widget to use hooks because I had created a confusing mess of nested components. Using hooks, the components seemed to be much cleaner:

// With Hooks
export const SliderComponent = props => {
  const [values, setValues] = useState([33, 66]);

  const handleChange = value => {
    ...
  };

  return (
    ...
    <Slider values={values} handleChange={handleChange} />
  );
};

After realizing that hooks would not work with the current Netlify CMS version, I had to update my refactored components to once again use recompose. This was quite trivial. And the result was almost just as clean. So even though I probably did and am still missing some obvious simplifications/improvements, this process showed me the power of approaching a problem differently. By trying to apply hooks, a concept that seemed more intuitive on the surface, I better understood more general approaches for structuring and combining components. So that’s pretty cool.

• The Netlify CMS bug
• Hooks don’t work in classes