Daniele Carta

Posted on Aug 25, 2020

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

#frontend #react #hook #typescript

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)

Paritosh Pundir • Aug 25 '20

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.

Daniele Carta • Aug 25 '20 • 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).

Paritosh Pundir • Aug 25 '20

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

Pavel Keyzik • Aug 25 '20

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

DEV Community

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

Hi Developer!

Top comments (4)

Read next

10+ Beauty and Cosmetics E-Commerce Website Templates

Angular Event Modifier

Chrome DevTools: CSS Overview Panel

API Routes in Next.js - Part 4