Search code examples
reactjsdesign-patternsreact-hookslifecyclereusability

Will creating a hook that doesn't access to React lifecycle cause problems farther a project grows?


I've created a hook called useFilestack that now abstracts the logic to upload a file from a binary, but in the future it can grow as needed. So it looks like this:

const useFilestack = () => {
  const upload = (binary: string) => {
    const file = Buffer.from(binary, 'binary').toString('base64');

    const filestack = client.init(apiKey);

    filestack.upload(file);
  };

  return {
    upload,
  };
};

As you can see, it doesn't access to the React lifecycle using for example some useEffect or useState.

Is that a bad practice? I'm gonna use this in some many place so it makes sense for me to abstract it in some place.

EDIT: I edited the question so it is not opinion-based. Thanks @Heret Monkey for the suggestion.


Solution

  • It's just currently not a hook so you don't have to use the use* naming convention.

    One could even argue that you shouldn't use the hooks naming convention as other people might think this function has to be used like a hook ("Rules of hooks").

    A custom hook is not just a function that gets called in a component but a function that actually uses one or more hooks internally. There is nothing bad about it except of maybe the name. It's simply a helper function that encapsulates a certain work flow.

    Unless you think it will use hooks in the near future you can just name it differently so that other do not confuse it with a hook.