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
799
votes
23 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
  • 8,023
  • 3
  • 8
  • 8
797
votes
18 answers

The useState set method is not reflecting a 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, both with and without the spread syntax. I have made an…
Pranjal
  • 8,083
  • 3
  • 8
  • 13
562
votes
23 answers

React Hooks: useEffect() is called twice even if an empty array is used as an argument

I am new to reactJS and am writing code so that before the data is loaded from DB, it will show loading message, and then after it is loaded, render components with the loaded data. To do this, I am using both useState hook and useEffect hook. Here…
J.Ko
  • 6,561
  • 3
  • 12
  • 28
523
votes
16 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
  • 10,673
  • 7
  • 30
  • 55
498
votes
17 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
  • 5,416
  • 3
  • 11
  • 17
426
votes
21 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
  • 6,874
  • 9
  • 28
  • 41
385
votes
16 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 =…
Erwin Zhang
  • 4,085
  • 2
  • 16
  • 11
384
votes
22 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
  • 37,514
  • 71
  • 268
  • 523
365
votes
8 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 ?
Milos N.
  • 4,416
  • 6
  • 18
  • 31
329
votes
18 answers

Make React useEffect hook not run on initial render

According to the docs: componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render. We can use the new useEffect() hook to simulate componentDidUpdate(), but it seems like useEffect() is…
Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
315
votes
13 answers

Attempted import error: 'useHistory' is not exported from 'react-router-dom'

useHistory giving this error: Failed to compile ./src/pages/UserForm/_UserForm.js Attempted import error: 'useHistory' is not exported from 'react-router-dom'. This error occurred during the build time and cannot be dismissed. react-router-dom…
Nafeo Alam
  • 4,000
  • 3
  • 14
  • 22
303
votes
18 answers

React Hooks useState() with Object

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

componentDidMount equivalent on a React function/Hooks component?

Are there ways to simulate componentDidMount in React functional components via hooks?
jeyko
  • 3,093
  • 3
  • 13
  • 16
285
votes
51 answers

Invalid hook call. Hooks can only be called inside of the body of a function component

I want to show some records in a table using React but I got this error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: You might have mismatching…
lwin
  • 3,784
  • 6
  • 25
  • 46
285
votes
7 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
  • 17,616
  • 11
  • 59
  • 85
1
2 3
…
99 100