CODEWITHSUNDEEP
reactjsreact-hooks
Janez Kuhar
Janez Kuhar

Reputation: 4266

How do hooks replace components?

Hooks, as I understand them, are just a way to add state (and lifecycle methods) to function components.

This FAQ answer:

In the longer term, we expect Hooks to be the primary way people write React components.
https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

and this documentation snippet:

Hooks let you split one component into smaller functions based on what pieces are related
https://reactjs.org/docs/hooks-intro.html

confuse me slightly as a React beginner.

It is as if I have to think about my app in terms of hooks rather than in terms of elements and components.

React didn't remove components, but the quote hints that hooks will replace components as the primary source of code reuse.

Can one still talk about elements and components as primary abstractions in React?

Upvotes: 1

Views: 710

Answers (2)

Ruffeng
Ruffeng

Reputation: 557

Currently, there are 2 ways of building components in React:

  1. Class Component
  2. Functional Component

You can check them here. The way you build it it's different. In case you approach the class component, that means that you need to work with the prototype of the object.

On the other side, if you choose to go as a functional component, that means that everything you request from React, is invoking a function, and not using the prototype at all. All this chaining from JS can slow down the performance, and that's why the React core team decided to go into pure functional direction: It can perform better, and it makes it even simpler to read it (once you get used to it).

Regarding the second quotation. It is a way to show more benefits of functional programming over classes. They are more flexible and can have a better composition for it.

One last addition: Approaching functional components doesn't mean you can ignore to learn class components. There's still a lot of apps with some legacy code. I would recommend learning both, and whenever you need to create new components, approach the functional component paradigm.

Upvotes: 0

D. Smith
D. Smith

Reputation: 749

The concept of components is not going away, it's just how they are written that is changing.

The second line you quoted

Hooks let you split one component into smaller functions based on what pieces are related

Is poorly worded in my opinion, and should rather say "Hooks let you split one class component into smaller functional components..."

So instead of having one monolithic class that handles all state and lifecycle logic in methods like componentDidMount, componentDidUpdate, you can split areas of concern and have smaller functional components that only care about things directly related to themselves.

Edit: This snippet from the hooks-intro doc might be helpful:

Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.

Upvotes: 3

Related Questions