React Function Component - Hooks

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React > Function Component

1 - About

hooks are functions (React >= 16.8) that can be used only in a functional component

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

2 - Rule

Advertising

3 - Example

4 - Motivation

Hooks let you:

  • reuse logic between components without changing your component hierarchy.
  • split one component into smaller functions based on what pieces are related.
  • use React without classes.

4.1 - Primitive for sharing stateful logic.

React doesn’t offer a way to “attach” reusable behavior to a component (for example, connecting it to a store). If you’ve worked with React for a while, you may be familiar with patterns like render props and higher-order components that try to solve this. But these patterns require you to restructure your components

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.

4.2 - Logic separation

Each lifecycle method often contains a mix of unrelated logic such as:

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.

React Function Component - (Side) Effect (useEffect Hook)

Advertising

5 - Documentation / Reference