Stack Overflow
Stack Overflow

Questions tagged [react-hooks]

Hooks is a new feature that allows developers to use state(s) and other React features without writing a class.

Hooks are the latest edition to React and allow you to use state and other React features without writing a class. They are 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

14084 questions
403
votes
16 answers

How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency:…
russ
  • 4,063
  • 3
  • 5
  • 8
352
votes
11 answers

useState set method not reflecting change immediately

I am trying to learn hooks and the useState method has made me confused. I am assigning an initial value to a state in the form of an array. The set method in useState is not working for me even with spread(...) or without spread operator. I have…
Pranjal
  • 3,633
  • 3
  • 6
  • 13
317
votes
7 answers

How to call loading function with React useEffect only once

The useEffect React hook will run the passed in function on every change. This can be optimized to let it call only when the desired properties change. What if I want to call an initialization function from componentDidMount and not call it again on…
Dávid Molnár
  • 7,524
  • 6
  • 25
  • 43
291
votes
16 answers

How to use componentWillMount() in React Hooks?

In the official docs of React it mentions - If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined. My question is - how can we use…
Abrar
  • 4,616
  • 7
  • 23
  • 35
231
votes
12 answers

How to compare oldValues and newValues on React Hooks useEffect?

Let's say I have 3 inputs: rate, sendAmount, and receiveAmount. I put that 3 inputs on useEffect diffing params. The rules are: If sendAmount changed, I calculate receiveAmount = sendAmount * rate If receiveAmount changed, I calculate sendAmount =…
rwinzhang
  • 2,545
  • 2
  • 14
  • 11
223
votes
10 answers

React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing

I was trying the useEffect example something like below: useEffect(async () => { try { const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`); const json = await response.json(); …
RedPandaz
  • 2,618
  • 2
  • 9
  • 16
203
votes
32 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,084
  • 2
  • 9
  • 6
192
votes
14 answers

How to use `setState` callback on react hooks

React hooks introduces useState for setting component state. But how can I use hooks to replace the callback like below code: setState( { name: "Michael" }, () => console.log(this.state) ); I want to do something after the state is updated. I…
Joey Yi Zhao
  • 23,254
  • 37
  • 138
  • 276
185
votes
13 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
  • 23,970
  • 25
  • 87
  • 133
162
votes
9 answers

Push method in React Hooks (useState)?

How to push element inside useState array React hook? Is that as an old method in react state? Or something new? E.g. setState push example ?
Milosh N.
  • 2,022
  • 4
  • 10
  • 16
154
votes
8 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
  • 21,469
  • 23
  • 94
  • 144
152
votes
3 answers

Should I use one or many useEffect in component?

I have some side effects to apply and want to know how to organize them: as a single useEffect or several useEffects What's better in terms of performance and architecture?
Vadim
  • 2,048
  • 3
  • 11
  • 19
152
votes
5 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
  • 1,686
  • 2
  • 9
  • 13
148
votes
12 answers

React Hooks useState() with Object

What is the correct way of updating state, is a nested object, in React with Hooks? export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne:…
isaacsultan
  • 2,146
  • 2
  • 11
  • 27
146
votes
5 answers

What's the difference between `useRef` and `createRef`?

I was going through the hooks documentation when I stumbled upon useRef. Looking at their example… function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text…
Rico Kahler
  • 12,583
  • 9
  • 41
  • 63
1
2 3
…
99 100