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
207
votes
11 answers

With useEffect, how can I skip applying an effect upon the initial render?

With React's new Effect Hooks, I can tell React to skip applying an effect if certain values haven't changed between re-renders - Example from React's docs: useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // Only…
uturnr
  • 2,516
  • 2
  • 12
  • 11
198
votes
4 answers

In useEffect, what's the difference between providing no dependency array and an empty one?

I gather that the useEffect Hook is run after every render, if provided with an empty dependency array: useEffect(() => { performSideEffect(); }, []); But what's the difference between that, and the following? useEffect(() => { …
Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114
196
votes
3 answers

useMemo vs. useEffect + useState

Are there any benefits in using useMemo (e.g. for an intensive function call) instead of using a combination of useEffect and useState? Here are two custom hooks that work exactly the same on first sight, besides useMemo's return value being null on…
Bennett Dams
  • 6,463
  • 5
  • 25
  • 45
196
votes
16 answers

Infinite loop in useEffect

I've been playing around with the new hook system in React 16.7-alpha and get stuck in an infinite loop in useEffect when the state I'm handling is an object or array. First, I use useState and initiate it with an empty object like this: const [obj,…
WhiteFluffy
  • 4,545
  • 3
  • 10
  • 12
191
votes
12 answers

react hooks useEffect() cleanup for only componentWillUnmount?

Let me explain the result of this code for asking my issue easily. const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); …
koo
  • 4,013
  • 6
  • 15
  • 31
183
votes
19 answers

React useEffect causing: Can't perform a React state update on an unmounted component

When fetching data I'm getting: Can't perform a React state update on an unmounted component. The app still works, but react is suggesting I might be causing a memory leak. This is a no-op, but it indicates a memory leak in your application. To…
Ryan Sam
  • 2,858
  • 4
  • 19
  • 30
165
votes
2 answers

Understanding the React Hooks 'exhaustive-deps' lint rule

I'm having a hard time understanding the 'exhaustive-deps' lint rule. I already read this post and this post but I could not find an answer. Here is a simple React component with the lint issue: const MyCustomComponent = ({onChange}) => { const…
Logan Wlv
  • 3,274
  • 5
  • 32
  • 54
159
votes
7 answers

react useEffect comparing objects

I am using react useEffect hooks and checking if an object has changed and only then run the hook again. My code looks like this. const useExample = (apiOptions) => { const [data, updateData] = useState([]); useEffect(() => { const…
peter flanagan
  • 9,195
  • 26
  • 73
  • 127
158
votes
18 answers

Line 0: Parsing error: Cannot read property 'map' of undefined

Currently starting up the server on my client side, the error above is what I have been getting. I am using TypeScript, ReactJS, ESLint. I can't seem to go forward since this error has been haunting me. The GitHub page for ESLint hasn't been of much…
Jon Hernandez
  • 1,650
  • 3
  • 6
  • 6
155
votes
7 answers

Handle an input with React hooks

I found that there are several ways to handle user's text input with hooks. What is more preferable or proper way to handle an input with hooks? Which would you use? 1) The simplest hook to handle input, but more fields you have, more repetitive…
ligowsky
  • 1,953
  • 4
  • 13
  • 15
153
votes
4 answers

What typescript type do I use with useRef() hook when setting current manually?

How can I use a React ref as a mutable instance, with Typescript? The current property appears to be typed as read-only. I am using React + Typescript to develop a library that interacts with input fields that are NOT rendered by React. I want to…
JPollock
  • 3,218
  • 4
  • 26
  • 36
152
votes
9 answers

How to register event with useEffect hooks?

I am following a Udemy course on how to register events with hooks, the instructor gave the below code: const [userText, setUserText] = useState(''); const handleUserKeyPress = event => { const { key, keyCode } = event; if (keyCode ===…
Isaac
  • 12,042
  • 16
  • 52
  • 116
149
votes
2 answers

How to change the value of a Context with useContext?

Using the useContext hook with React 16.8+ works well. You can create a component, use the hook, and utilize the context values without any issues. What I'm not certain about is how to apply changes to the Context Provider values. 1) Is the…
Randy Burgess
  • 4,835
  • 6
  • 41
  • 59
144
votes
11 answers

React: useState or useRef?

I am reading about React useState() and useRef() at "Hooks FAQ" and I got confused about some of the use cases that seem to have a solution with useRef and useState at the same time, and I'm not sure which way it the right way. From the "Hooks FAQ"…
Haim763
  • 1,514
  • 2
  • 10
  • 14
141
votes
6 answers

Executing async code on update of state with react-hooks

I have something like: const [loading, setLoading] = useState(false); ... setLoading(true); doSomething(); // <--- when here, loading is still false. Setting state is still async, so what's the best way to wait for this setLoading() call to be…
Colin Ricardo
  • 16,488
  • 11
  • 47
  • 80
1 2
3
…
99 100