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
139
votes
28 answers

How to use throttle or debounce with React Hook?

I'm trying to use the throttle method from lodash in a functional component, e.g.: const App = () => { const [value, setValue] = useState(0) useEffect(throttle(() => console.log(value), 1000), [value]) return (
Alexandre Annic
  • 9,942
  • 5
  • 36
  • 50
134
votes
9 answers

Uncaught Invariant Violation: Rendered more hooks than during the previous render

I have a component that looks like this (very simplified version): const component = (props: PropTypes) => { const [allResultsVisible, setAllResultsVisible] = useState(false); const renderResults = () => { return ( …
timothym
  • 2,853
  • 5
  • 19
  • 26
132
votes
5 answers

How to solve the "update was not wrapped in act()" warning in testing-library-react?

I'm working with a simple component that does a side effect. My test passes, but I'm getting the warning Warning: An update to Hello inside a test was not wrapped in act(...).. I'm also don't know if waitForElement is the best way to write this…
Pablo Darde
  • 5,844
  • 10
  • 37
  • 55
132
votes
2 answers

Is useState synchronous?

In the past, we've been explicitly warned that calling setState({myProperty}) is asynchronous, and the value of this.state.myProperty is not valid until the callback, or until the next render() method. With useState, how do I get the value of the…
AnilRedshift
  • 7,937
  • 7
  • 35
  • 59
130
votes
6 answers

When to use useCallback, useMemo and useEffect?

What is the main difference between useCallback, useMemo and useEffect? Give examples of when to use each of them.
Edgar
  • 6,022
  • 8
  • 33
  • 66
127
votes
10 answers

How to change React-Hook-Form defaultValue with useEffect()?

I am creating a page for user to update personal data with React-Hook-Form. Once paged is loaded, I use useEffect to fetch the user's current personal data and set them into default value of the form. I put the fetched value into defaultValue of…
theedchen
  • 1,564
  • 4
  • 10
  • 17
126
votes
8 answers

How to sync props to state using React hooks : setState()

I am trying to set the state using React hook setState() using the props the component receive. I've tried using the below code: import React,{useState , useEffect} from 'react'; const Persons = (props) => { // console.log(props.name); …
METALHEAD
  • 2,734
  • 3
  • 22
  • 37
124
votes
6 answers

React useReducer async data fetch

I'am trying to fetch some data with new react useReducer API and stuck on stage where i need to fetch it async. I just don't know how :/ How to place data fetching in switch statement or it's not a way how it's should be done? import React from…
ZiiMakc
  • 31,187
  • 24
  • 65
  • 105
120
votes
8 answers

Is it possible to share states between components using the useState() hook in React?

I was experimenting with the new Hook feature in React. Considering I have the following two components (using React Hooks) - const HookComponent = () => { const [username, setUsername] = useState('Abrar'); const [count, setState] =…
Abrar
  • 6,874
  • 9
  • 28
  • 41
119
votes
13 answers

How do I update states `onChange` in an array of object in React Hooks

I have retrieved data stored using useState in an array of object, the data was then outputted into form fields. And now I want to be able to update the fields (state) as I type. I have seen examples on people updating the state for property in…
reddy
  • 1,721
  • 3
  • 16
  • 26
118
votes
7 answers

React Hook : Send data from child to parent component

I'm looking for the easiest solution to pass data from a child component to his parent. I've heard about using Context, pass trough properties or update props, but I don't know which one is the best solution. I'm building an admin interface, with a…
Kaherdin
  • 2,055
  • 3
  • 23
  • 34
118
votes
9 answers

Updating and merging state object using React useState() hook

I'm finding these two pieces of the React Hooks docs a little confusing. Which one is the best practice for updating a state object using the state hook? Imagine a want to make the following state update: INITIAL_STATE = { propA: true, propB:…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
117
votes
7 answers

Does React batch state update functions when using hooks?

For class components, this.setState calls batch if inside event handlers. But what happens if state is updated outside the event handler and using useState hook? function Component() { const [a, setA] = useState('a'); const [b, setB] =…
vadirn
  • 1,715
  • 4
  • 15
  • 16
115
votes
7 answers

React Hooks - using useState vs just variables

React Hooks give us useState option, and I always see Hooks vs Class-State comparisons. But what about Hooks and some regular variables? For example, function Foo() { let a = 0; a = 1; return
{a}
; } I didn't use Hooks, and…
Moshe Nagar
  • 1,271
  • 2
  • 9
  • 7
112
votes
10 answers

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks

Given the following component, when I press down on the age selector and change the value to 15, such that I render a form without the driver license field, I get the error: Uncaught Error: Rendered fewer hooks than expected. This may be caused by…
Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
1 2 3
…
99 100