React Hook most proper ways to refactor resusable functions and effects

user_6428160 0
Viewed 101

let's consider two hook components:

export function HookCompA({a,b,c,d}){
  ...
  useEffect(...,[x])

  useEffect(...,[y])

  functionA{...};
  functionB{...};
  functionC{...};
  functionD{...};
...
}

export function HookCompB({a,b,c,e}){
  ...
  useEffect(...,[x])

  useEffect(...,[w])

  functionA{...};
  functionB{...};
  functionC{...};
  functionE{...};
  ...
}

Despite being so similar, due to the nature of the context, we have to consider these hooks as different components, however, there is a lot of duplicated code to refactor and they even share the same code for some effects.

Due to my experience with OOP, it is hard to imagine how to solve this issue without a callback to inheritance, which is not what hooks is all about. I neither think that just exporting the functions in another file and adding them to both hooks is the best idea.

I wish to know the best practice for reusing code in hooks, specially for effects.

react-hooks reactjs javascript
1 Answers

I wish to know the best practice for reusing code in hooks, specially for effects.

This is rather subjective/opinionated question, so I'll attempt to answer objectively.

React hooks are just plain old Javascript functions with some special rules applied against them in how and where they can be called.

Despite being so similar, due to the nature of the context, we have to consider these hooks as different components, however, there is a lot of duplicated code to refactor and they even share the same code for some effects.

React hooks were designed with composability/reusability code in mind.

Motivation

With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

This means exactly as you describe, centralizing the "common" functions in, say a src/utils directory where they can be testing in isolation and proven to work, and exported for composition into other units, like custom React hooks. Even the functions used in the useEffect and other base React hooks can be centralized/organized.

import {
  functionA,
  functionB,
  functionC,
  functionD,
  functionE,
  functionF,
  functionG,
  functionH,
} from '../utils';

export useBaseHook = (a,b,c) => {
  useEffect(() => {
    functionG(a, b);
    functionH(c);
  }, [a, b, c]);
};

export function useHookCompA({ a, b, c, d }) {
  ...
  useEffect(...,[x]);
  useEffect(...,[y]);

  useBaseHook(d, c, a);

  functionA{...};
  functionB{...};
  functionC{...};
  functionD{...};
  ...
}

export function useHookCompB({ a, b, c, e }) {
  ...
  useEffect(...,[x]);
  useEffect(...,[w]);

  functionA{...};
  functionB{...};
  functionC{...};
  functionE{...};
  ...
}
user_86908570
Related