Stack Overflow
Stack Overflow

Questions tagged [react-hooks]

React Hooks are a feature that allows developers to use state(s) and other React component lifecycle features without writing a class-based component.

Hooks are a React feature that allow you to use state and other React component lifecycle features without writing a class-based component. They were released as a part of React v16.8.0.

Hooks let you turn functional components into stateful ones and also introduce a new approach to splitting logic based on its purpose instead of concentrating on lifecycle methods to extend.

Hooks are backwards-compatible, you can use Hooks in new components without rewriting any existing code.

The following Hooks are Provided by React out of the box

Basic Hooks

Additional Hooks

More info:

Official React Hooks Docs

Hooks introduction at React Conf

Developers can also create their own custom hooks based on Building Your Own Hooks

29937 questions
285
votes
5 answers

Set types on useState React Hook with TypeScript

I'm migrating a React with TypeScript project to use hooks features (React v16.7.0-alpha), but I cannot figure out how to set typings of the destructured elements. Here is an example: interface IUser { name: string; } ... const [user, setUser] =…
Hassen
  • 6,966
  • 13
  • 45
  • 65
280
votes
3 answers

In general is it better to use one or many useEffect hooks in a single component?

I have some side effects to apply in my react component and want to know how to organize them: as a single useEffect or several useEffects Which is better in terms of performance and architecture?
Vadim
  • 3,474
  • 3
  • 14
  • 21
276
votes
6 answers

Can I set state inside a useEffect hook

Lets say I have some state that is dependent on some other state (eg when A changes I want B to change). Is it appropriate to create a hook that observes A and sets B inside the useEffect hook? Will the effects cascade such that, when I click the…
Dan Ruswick
  • 2,990
  • 2
  • 12
  • 14
262
votes
19 answers

How can I use multiple refs for an array of elements with hooks?

As far as I understood I can use refs for a single element like this: const { useRef, useState, useEffect } = React; const App = () => { const elRef = useRef(); const [elWidth, setElWidth] = useState(); useEffect(() => { …
devserkan
  • 16,870
  • 4
  • 31
  • 47
260
votes
37 answers

React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function

I'm trying to use react hooks for a simple problem const [personState,setPersonState] = useState({ DefinedObject }); with following dependencies. "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts":…
Bishnu
  • 2,674
  • 2
  • 14
  • 7
256
votes
14 answers

State not updating when using React state hook within setInterval

I'm trying out the new React Hooks and have a Clock component with a time value which is supposed to increase every second. However, the value does not increase beyond one. function Clock() { const [time, setTime] = React.useState(0); …
Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
237
votes
7 answers

React.useState does not reload state from props

I'm expecting state to reload on props change, but this does not work and user variable is not updated on next useState call, what is wrong? function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? …
vitalyster
  • 4,980
  • 3
  • 19
  • 27
236
votes
9 answers

Multiple calls to state updater from useState in component causes multiple re-renders

I'm trying React hooks for the first time and all seemed good until I realised that when I get data and update two different state variables (data and loading flag), my component (a data table) is rendered twice, even though both calls to the state…
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
235
votes
11 answers

React hooks: accessing up-to-date state from within a callback

EDIT (22 June 2020): as this question has some renewed interest, I realise there may be a few points of confusion. So I would like to highlight: the example in the question is intended as a toy example. It is not reflective of the problem. The…
rod
  • 3,403
  • 4
  • 19
  • 25
230
votes
14 answers

What is useState() in React?

I am currently learning hooks concept in React and trying to understand below example. import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); …
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
229
votes
11 answers

React hooks - right way to clear timeouts and intervals

I don't understand why is when I use setTimeout function my react component start to infinite console.log. Everything is working, but PC start to lag as hell. Some people saying that function in timeout changing my state and that rerender component,…
ZiiMakc
  • 31,187
  • 24
  • 65
  • 105
226
votes
10 answers

Determine which dependency array variable caused useEffect hook to fire

Is there an easy way to determine which variable in a useEffect's dependency array triggers a function re-fire? Simply logging out each variable can be misleading, if a is a function and b is an object they may appear the same when logged but…
Cumulo Nimbus
  • 8,785
  • 9
  • 47
  • 68
224
votes
9 answers

Why is useState not triggering re-render?

I've initialized a state that is an array, and when I update it my component does not re-render. Here is a minimal proof-of-concept: function App() { const [numbers, setNumbers] = React.useState([0, 1, 2, 3]); console.log("rendering..."); …
Ryan Z
  • 2,657
  • 2
  • 8
  • 20
221
votes
8 answers

How to use callback with useState hook in react

I am using functional component with hooks. I need to update state in parent from a child. I am using a prop function in Parent. All works fine except my prop function is getting the previous state and not the current state. My prop function gets…
Atul
  • 3,013
  • 2
  • 12
  • 15
220
votes
20 answers

How can I force a component to re-render with hooks in React?

Considering below hooks example import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return (

You clicked {count} times

Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
1
2
3
…
99 100