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
2 answers

Updating component's state using props with functional components

I am trying to update the state of my component using props that I get from the parent component, but I get the following error message: Too many re-renders. React limits the number of renders to prevent an infinite loop. I want the local state…
Jonas.D
  • 357
  • 1
  • 5
  • 14
5
votes
3 answers

More advanced comparison in React's useEffect

I am looking for a way to perform more advanced comparison instead of the second parameter of the useEffect React hook. Specifically, I am looking for something more like this: useEffect( () => doSomething(), [myInstance], (prev, curr) => {…
Victor
  • 13,914
  • 19
  • 78
  • 147
5
votes
1 answer

What is the best way to update state using useReducer function hooks?

I have a list with the following actions: Add an Object into an array using useReducer() function. Remove an Object from an array using useReducer() function. Replace new array with old array using useReducer() function. I need the best and safe…
Muhammad
  • 2,572
  • 4
  • 24
  • 46
5
votes
1 answer

How to remove event listener from a Backdrop which is being dismounted?

I have a Backdrop_DIV which is rendered based on a open for a Dropdown component. {open && Backdrop } I want the Backdrop_DIV to go away if the…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
5
votes
2 answers

How to get the current url path using hook router in react?

I'm new to react and react hooks. I'm using hookrouter package and I tried to googling about the question, but didn't find much about it. What I want? I'm trying to get the current url path. For e.g. for https://example.com/users/temp, I want to…
Dhruvil21_04
  • 1,804
  • 2
  • 17
  • 31
5
votes
2 answers

issue with react-router BrowserRouter in react with typescript?

I have gone through several similar questions but could not find something that worked. I am trying to bring in BrowserRouter from react-router but it says: Module '"../node_modules/@types/react-router"' has no exported member 'BrowserRouter' as per…
Fizlo
  • 75
  • 1
  • 6
5
votes
3 answers

forceUpdate with React hooks

Is there a replacement for forceUpdate that one can use with React hooks? My use case is a shared state between component instances. Essentially each instance is just an view into single global state. With ES6 class the code register/unregister the…
Igor Bukanov
  • 4,636
  • 3
  • 16
  • 23
5
votes
0 answers

React Hooks and Enzyme: React keeps telling me to wrap state updates in act(...), even thought I did

I've been teaching myself how to test react components with enzyme and jest, but I'm clueless as to how to test a mounted component which uses React hooks. Here is a simplified version of the component... const [records, setRecords] =…
Hiroki
  • 3,893
  • 13
  • 51
  • 90
5
votes
1 answer

how to use redux-sagas with react-hooks

I would like to know how to use redux sagas with react hooks, how does redux get implemented, is there any unique use cases to know about? Should I be using the regular react dispatch?
Kevin Danikowski
  • 4,620
  • 6
  • 41
  • 75
5
votes
2 answers

How to add to object using react hook useState?

Please take a look at this code snippet. function App() { useEffect(() => { document.addEventListener('keydown', onKeyDown); }, []); const onKeyDown = e => { setKeyMap({ ...keyMap, [e.keyCode]: true }); }; const [keyMap,…
theprogrammer
  • 1,698
  • 7
  • 28
  • 48
5
votes
0 answers

React useReducer dispatch order

I am using useReducer, and want to dispatch 2 times. Is it guaranteed that the state fed to the reducer the second time is output of the first update? If I do this dispatch({ type:"RESET" }); // set state to default state dispatch({ type:"LOAD", id:…
swenedo
  • 3,074
  • 8
  • 30
  • 49
5
votes
2 answers

React: Difference between a Stateful Class Component and a Function Component using Hooks?

I've just created a function component which contains the expression const [state, setState] = useState(). Now that I have access to state and setState(), this stateful function component is very similar to a stateful class component. I'm only aware…
Bo Thompson
  • 359
  • 1
  • 12
5
votes
3 answers

React useCallback does not get updated on state change

The sample below is a simplified excerpt where a child component emits events based on mouse behaviours. React then should update the DOM according to the emitted events. function SimpleSample() { const [addons, setAddons] = React.useState({ …
wkrueger
  • 1,281
  • 11
  • 21
5
votes
1 answer

Optimistic rendering & useEffect

TL'DR: Is there a way to pessimistically operate state changes while using useEffect for API calls? Lets say you wrote a component that displays a paginated / sorted grid of data and you wrote a useEffect for that component similar to this fake…
Stewart Anderson
  • 333
  • 2
  • 14
5
votes
4 answers

SetInterval is not showing updated state

I have set the state to true before calling the setInterval function. But even though the useEffect hook is being triggered with the new value of the state, it's not being reflected in the setInterval function. Code sandbox here:…
acesmndr
  • 8,137
  • 3
  • 23
  • 28