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.
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.