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

How to execute appropriate useState dynamically from string names in react hooks?

Imagine a scenario that there's a same operation through different values (For instance generating a custom html element for different input values); in the case of using a component class, I would mocked this as follow: const onFuncClicked =…
Elmira Khodaee
  • 93
  • 1
  • 1
  • 11
5
votes
3 answers

React hooks equivalent for ComponentWillMount

I'v taken a look here but the selected answer does not answer the question. I'm looking for a componentWillMount() equivalent to execute logic similar to: useEffect(() => { if (condition) { // do stuff } }, []); The issue with the above is…
Mike K
  • 7,621
  • 14
  • 60
  • 120
5
votes
2 answers

React Hooks: How to useRef().current correctly and cleanly

I've been using useRef in my function components as an alternative to class instance variables and I really like it. So typically it goes something like this: First declare the variable, scrollRef for example: const scrollRef = useRef() Then,…
samzmann
  • 2,286
  • 3
  • 20
  • 47
5
votes
2 answers

What is difference between lifecycle method and useEffect hook?

In class Components, we use componentDidMount, componentDidUpdate lifecycle method to update the state. ex) componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You…
Doni
  • 65
  • 1
  • 1
  • 4
5
votes
1 answer

React useMemo hook use case

Context After reading through the official doc for hooks, I wanted to try useMemo in one of my projects. To test it, I set up a sandbox project here. The example uses an expensive computation at every input change (see "ellapsed ms"). Every time…
Thierry Prost
  • 1,005
  • 11
  • 22
5
votes
1 answer

How to check if state default boolean false is changing to true with React Hook useEffect

Currently, I am totally stuck with React Hook. When the state changes to true it should show console.log('currentBoolean'), but that is not happening. Not sure if I should use usePrevious for that, because when comparing numbers it works well with…
frontend
  • 137
  • 1
  • 11
5
votes
2 answers

React TS useContext useReducer hook

I can't figure out what the type error is in this code import React from 'react'; interface IMenu { items: { title: string, active: boolean, label: string }[] } type Action = | { type: 'SET_ACTIVE', label: string } const…
Tarang Hirani
  • 560
  • 1
  • 12
  • 43
5
votes
2 answers

How to create useStripe hook for react-stripe-elements

Stripe has react-stripe-elements, which provides injectStripe HOC. We're in 2019 and HOCs are not cool anymore. Stripe doesn't appear to be in a hurry, i assume it's because they want to support older versions of React, so are looking at lowest…
Andrei R
  • 4,904
  • 5
  • 25
  • 26
5
votes
1 answer

equalityFn in Redux useSelector doesn't work with objects and arrays

I think equalityFn in useSelector doesn't work as it should. It works great with simple strings/numbers but it doesn't work with objects and arrays. It always gets 'item' and 'prevItem' equal in this case. Check example here: import React, {…
Nick
  • 61
  • 1
  • 3
5
votes
2 answers

React: Trying to rewrite ComponentDidUpdate(prevProps) with react hook useEffect, but it fires when the app starts

I'm using a componentDidUpdate function componentDidUpdate(prevProps){ if(prevProps.value !== this.props.users){ ipcRenderer.send('userList:store',this.props.users); } to this const users = useSelector(state =>…
Sai Krishna
  • 547
  • 1
  • 12
  • 26
5
votes
2 answers

Restore scroll position in React Hooks with useRef is shaky

I want to scroll to my previous window position by setting inside a useEffect the window position back to its previous state. To get the previous state, I am using useRef. The Component was once class-based and there it worked perfectly. After I…
Emre
  • 163
  • 2
  • 10
5
votes
1 answer

How to use useEffect() inside a child component to fetch data?

I wonder if it make sense (or possible) to use useEffect inside a child component to load data only when the child component is included in the parent compnent. Inside the child component I have the following code: useEffect(() => { if…
renakre
  • 8,001
  • 5
  • 46
  • 99
5
votes
2 answers

Difference between assigning React ref using a callback versus setting it directly?

It works and behaves the same, but wanted to know if there are any practical differences to setting a ref directly versus setting it via a callback that has the element as an argument. Given this react hook component: const myComponent = ({…
peter
  • 538
  • 1
  • 3
  • 13
5
votes
1 answer

How to use useMemo hook to memoize children

I have a component that renders Markers on leaflet map. The markers need to change position every time the server sends a new position for one or more markers. How can I change the position of the specific markers that changed its position without…
Nave
  • 113
  • 2
  • 7
5
votes
1 answer

Must a React reducer be a pure function?

I wrote a UI element as a function component which uses React's userReducer hook and it seems to run without errors. useReducer references a function I wrote (called, imaginatively, reducer): const [state, dispatch] = React.useReducer(reducer,…
ChrisW
  • 54,973
  • 13
  • 116
  • 224
1 2 3
…
99
100