Hooks

Question 1

What are hooks?

Answer 1

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components.

Question 2

Hooks and small functions

Answer 2

Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.

Question 3

What are side effects in React?

Answer 3

Data fetching, subscriptions, or manually changing the DOM are all examples of side effects. We call these operations “side effects” (or “effects” for short) because they can affect other components and can’t be done during rendering.

Question 4

What are the Rules of hooks?

Answer 4

Hooks are JavaScript functions, but they impose two additional rules:

1. Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
2. Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. )

Question 5

Building Custom Hooks

Answer 5

Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: higher-order components and render props. Custom Hooks let you do this, but without adding more components to your tree

If a function’s name starts with ”use” and it calls other Hooks, we say it is a custom Hook.

Question 6

When would I use a hook?

Answer 6

If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.

Question 7

Does a function component have ‘this’?

Answer 7

In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component.

Question 8

How does React associate Hook calls with components?

Answer 8

React keeps track of the currently rendering component. Thanks to the Rules of Hooks, we know that Hooks are only called from React components (or custom Hooks — which are also only called from React components).

There is an internal list of “memory cells” associated with each component. They’re just JavaScript objects where we can put some data. When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple useState() calls each get independent local state.