DEV Community

Cover image for Custom Hooks vs Class vs Other... What is your choice?
Daniele Carta
Daniele Carta

Posted on

Custom Hooks vs Class vs Other... What is your choice?

Hi Developer!

Today I want to ask you what is your prefer method to develop a business logic.

In last year, with ReactJS 16.8, with the functional components + hooks, develop custom hooks with the business logic is very simple and practice.

We need to have and to use Classes in a project? Or now we can use only the custom hooks?

And with Typescript, we have the possibility to use "Namespace" a collection of class.

Give me your opinion, and your best methodology!

Follow me on Github
Follow me on LinkedIn

Top comments (4)

Collapse
 
paritosh_pundir profile image
Paritosh Pundir

I personally have mixed and matched things with typescript. For certain components that handle complex logic, you can create it as a class, and anything that is lightweight you can use functional component with hooks.

If the project is organized well and the style of the component and business logic or the data is in a different place, it makes your life easier. You can easily plug and play your data with any component.
I personally don't like mixing the data manipulations inside the components and instead make a parent component that can handle that for me. This is more like a component that doesn't have any HTML of its own but just renders components based on the logic applied to the data.

Collapse
 
crtdaniele profile image
Daniele Carta • Edited

Thanks for your answer!
Personally, in this moment I prefer to use only functional component with hooks (in my opinion hooks are the future in reactjs).

For example, in general I create a custom hooks with the business logic:

// useCategory

const dispatch = useDispatch();
const { list, isLoading, isError } = useSelector<RootState, ICategory>(state => state.category);

const getAll = () => {
    if(list && list.length === 0){
        dispatch(fetchCategory());
    }else{
        list && sortByName(list);
    }

    return { list, isLoading, isError };
}

const getSubCategory = () => {

}

return {
    getAll,
    getSubCategory
};

And in the FC I have only this:

const category = useCategory();

With this method, I can reuse useCategory in all of my components, and I think is better in case of re-factoring (coding/HTML).

Collapse
 
paritosh_pundir profile image
Paritosh Pundir

Yes, for sure it works perfectly fine! And the usage for sure depends on the scale as well, so for me, I always start with functional and the project itself tells me when to go the other way around. That is mostly to adapt to a plugins coding pattern or any other reason. 🖖

Collapse
 
pavelkeyzik profile image
Pavel Keyzik

I prefer to use hooks. For me hook is like Controller of some feature. With hook it looks easier to share any code between any components. Also, with hooks I’m able to start write business logic earlier than I did that with Redux before. I haven’t use classes for a year and didn’t have any problems. Just one issue that I had with hooks is that when I use API requests, then I can do something wrong and get two requests just because I used hook twice in different components. Contexts solve this but for me it’s challenging to keep in mind this 😄 Hope that I’ll never get same requests again and again