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
5
votes
3 answers

Why react hook value is not updated in async function?

When running the run function, I expect that value variable has value 'new', but since even 500 ms, it still remains 'old'. Why that happens and how coud this issue be solved? import React, { Component, useState } from "react"; import { render }…
Eugene Beliaev
  • 781
  • 1
  • 8
  • 15
5
votes
2 answers

React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked

I am sending my state as a stringified variable from a form to a POST request through a lamda server which then parses it and sends it to sendgrid which there I am using send grids templating feature. Which requires me to have json Formatted like…
Anders Kitson
  • 1,413
  • 6
  • 38
  • 98
5
votes
1 answer

React Context : Get Data from API and call API whenever some events happens in React Component

I am new to React Context. I need to call the API in react context to use its data throughout my react application. Also the same API needs to be called on some CRUD operation on various component of react application. For now I am storing API data…
Xperia Reno
  • 381
  • 1
  • 9
  • 17
5
votes
1 answer

Chrome Dev Tools Shows all useState hooks with the name 'State'

I am trying to inspect a React Hooks component in Dev Tools, but regardless of component, all my useState hooks show up as: Hooks State: false State: null Effect: fn() The false values are correct, but I can't figure out which hook is which since…
Badrush
  • 1,247
  • 1
  • 17
  • 35
5
votes
4 answers

How make react countdown timer

i'm trying to do countdown timer with react. It will be basically countdown from 10 to 0 and when 0 i will call some function. i found ideally for me some example: https://codesandbox.io/s/0q453m77nw?from-embed but it's a class component i wan't…
user3348410
  • 2,733
  • 10
  • 51
  • 85
5
votes
2 answers

Prevent submit on route change Formik AutoSave

My app has form with component. This component calls submit once form values were changed. Everything works well but when changing the route it changes form values and calls submit. How to solve this problem? A possible…
Arthur
  • 3,056
  • 7
  • 31
  • 61
5
votes
3 answers

About infinite loop in useEffect

I am trying to build a redux process with react hooks, the code below is that I want to simulate a ComponentDidMount function with a getUsers(redux action) call in it which is a http request to fetch data. The first version was like this const {…
boaol
  • 108
  • 1
  • 6
5
votes
1 answer

React hook cleanup when refreshing the page

I have an app built in React using hooks that when closed needs to notify the server. I tried doing it using the following approach: function onUnload() { if (roomID !== "") endGame(roomID, dispatch); } useEffect(() =>…
Adrian Pascu
  • 949
  • 5
  • 20
  • 48
5
votes
2 answers

Understanding React hooks useEffect function.When is the callback function(i.e unsubscribe) in useffect gets called?

I have been trying to understand when is unsubscribe(the callback in useEffect) gets called exactly. This is the codepen link : https://codepen.io/deen_john/pen/eYmNdMy Code : const { useState, useEffect } = React ; function App() { const…
Deen John
  • 3,522
  • 4
  • 29
  • 32
5
votes
2 answers

Run fetch at regular intervals using react

I have a grid with different react components, all independant - in that they fetch their own data and display it. I wanted to somehow make them automatically refetch and update every 15 minutes. My first idea was a HOC, but with the newer hooks and…
Yonder
  • 719
  • 2
  • 13
  • 26
5
votes
2 answers

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

Below you can see simpliest component ever that renders a functional component using hooks. import React, { Component, useState } from 'react' export default class ImageList extends Component { render() { return ( …
TyForHelpDude
  • 4,828
  • 10
  • 48
  • 96
5
votes
4 answers

How to make code synchronous in useEffect

I know its not recommended to create add async to useEffect but how can I make sure my function is completely done before continuing Here is my code useEffect( () => { const RetrieverDataProcess = async () => { const…
Hawk
  • 514
  • 1
  • 7
  • 22
5
votes
2 answers

how to control the re-running with useEffect

I have a little bit of doubt in the useEffect function. I am trying to stop the unnecessary condition with useEffect. the question is can I control the useEffect with condition and is it possible?. the example code, it is normal code, useEffect(()…
Ajith kumar
  • 123
  • 1
  • 12
5
votes
5 answers

React: HTML Details toggles uncontrollably when starts open

I'm trying to use the HTML
tag to create a simple expandable section using semantic html in combination with React. The
behaviour works great out of the box and for the 1-2% of my users that use IE…
Joel Biffin
  • 348
  • 1
  • 6
  • 18
5
votes
1 answer

How does React useState and useCallback hook work when useCallback lacks dependencies

I am studying react-hook recently. I have encountered a problem which makes me unable to understand in the process of practice. import React, { useState, useCallback } from 'react'; const set = new Set(); function Demo() { const [count,…
DangoSky
  • 185
  • 1
  • 2
  • 15
1 2 3
…
99 100