Custom Hooks inside Javascript Class - reactjs

Question

I know that we can create multiple custom hooks in separate files for example
useCounter.js and useToggle.js.
My Question
Can we create a Javascript class with its methods as custom hooks and use it in our functional components. Is this an anti-pattern ? The reason I am thinking to put it in a JS class is so that I don't have to create multiple files for custom hook.
Something Like below
class CustomHooks {
useCounter() {
const [count, setCount] = React.useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return { count, increment, decrement };
}
useToggle(initialState = false) {
const [state, setState] = React.useState(initialState);
const toggle = () => setState(!state);
return { state, toggle };
}
}
And use it like below
const hooks = new CustomHooks();
const Counter = () => {
const { count, increment, decrement } = hooks.useCounter();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
const Toggler = () => {
const { state, toggle } = hooks.useToggle();
return (
<div>
<p>Toggler is {state ? "on" : "off"}</p>
<button onClick={toggle}>Toggle</button>
</div>
);
};
const App = () => {
return (
<div>
<Counter />
<Toggler />
</div>
);
};

Answer 1

You cannot use React hooks in class. If your goal is not to have multiple files for multiple hooks, create a single file and export multiple hooks from it.
// hooks.js
export const useToggle = () => {
// hook implementation
}
export const useCounter = () => {
// hook implementation
}
And use them in your components
// App.js
import { useToggle, useCounter } from './hooks';
function App() {
const toggle = useToggle();
const counter = useCounter();
return <div>hi there</div>
}

Answer 2

You can simply create an object that will hold the hooks.
customhooks.js
function useCounter () {
...
}
function useToggle(initialState = false) {
...
}
export const hooks = {
useCounter,
useToggle
}
counter.js
import { hooks } from "./customhooks.js";
const Counter = () => {
const { count, increment, decrement } = hooks.useCounter();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
However, personally I recommend handling with individual files per hook. Especially when the project gets bigger and we have many hooks, we eventually get to the point that we need different hooks in different areas and it can be detrimental to performance if all hooks have to be loaded at once. Of course, this is not only related to the number but also to the complexity of the hooks and what dependencies they have in turn.