What are React Hooks?

About

hooks are functions that:

Naming

  • If your function contains hooks, you should prefix it with use.
  • If your function does not contain hooks, you should prefix it with get. This way you are sure that it does not contain a React state and should not follow the rule of hooks.

Rule

https://reactjs.org/docs/hooks-rules.html

  • use

Example

See State example

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.

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.

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)

Support

Invalid hook call

In the log, you may see this error:

Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

The invalid-hook-call gives more information but forgot to mean what it means to be inside the body of a function component.

A React component function is not just a Javascript function, this is a function wrapped in a element

If you have tried all solution and that it's not working, wrap it in a react element like that:

let App = React.createElement(yourfunction, props, ...children);

Documentation / Reference





Discover More
How to inject multi React components in a page? A Multiple Root demo

This page shows how to render multiple root in the same web page For instance, when you want to integrate React component in another HTML application (php, ruby,...) with templating, you may render several...
React - Auth

Authentication is just a state that indicates if a user is logged in or not. When react makes a request to a web server, the web server will authenticate the request. Via pure hook function - ...
React - Component (User-defined Element)

A component is a user-defined react element in the React tree. Components let you split the UI into independent, reusable pieces, and think each piece in isolation. Conceptually, components are like...
React Hook Side Effect Doc Title
React Function Component - (Side) Effect (useEffect Hook)

Effect Hook is a hook that lets you perform side effects in functional components, and is similar to lifecycle methods in classes. An effect is also known as a side-effect Example of effect: Data...
What is a React Ref?

A ref is a state object that holds a value in its current property for the entire lifetime of the component. It's used to hold information that isn’t used for rendering. Unlike with state, updating...
What is the useState Hook and how to use it? Local State in a React Function Component

This page is the local state (known as the state in react) in a React Functional Component. In this context, the state is managed by the useState hook. The local state in React is managed with the...



Share this page:
Follow us:
Task Runner