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
1 answer

How to use mutations in react-apollo-hooks and formik?

In my many attempts, I've tried to use react-apollo-hooks and formik together but it seems impossible. The data from the forms is only available in the tag, and is otherwise inaccessible outside of it. Also I can't call my useMutation hook…
pizzae
  • 2,815
  • 6
  • 26
  • 45
5
votes
1 answer

Use case for useLayoutEffect + useState vs useMemo

I've seen this answer: useMemo vs. useEffect + useState , and it sums it up well for useEffect, but in my case I want to perform an expensive operation that will change the DOM as early as possible. Would useMemo() still be recommended instead of…
P Fuster
  • 2,224
  • 1
  • 20
  • 30
5
votes
1 answer

React Hooks - Why array destructuring over object destructuring?

I've just started writing some custom hooks and the question popped up, should I return a set of values as an array or as an object? Is there a specific reason that useState returns an array of a pair values and not an object with two properties? I…
Vishwas
  • 1,398
  • 8
  • 20
  • 33
5
votes
2 answers

How to trigger a state update without triggering it’s useEffect

I’m using function components and hooks. I have a hook that sends REST request to fetch a set of application data which involves multiple params (such as userId, productId etc) from an object in application state. This hook uses a useEffect() along…
T J
  • 42,762
  • 13
  • 83
  • 138
5
votes
1 answer

How to test react component based on file reader emitted events

I have a react component called FileReader based off Dropzone react component (https://github.com/react-dropzone/react-dropzone). This file reader calls a callback react hook upon dropping a file on the input element of FileReader which looks like…
Sebastian Serrano
  • 262
  • 1
  • 16
5
votes
1 answer

React hooks: Parent component not updating when dispatch is called in a child component

I've been following a guide to pass down a reducer to child components with useContext, but when dispatching from a child component, it did not seem to re-render the parent component. The state itself seems to be correctly updating when dispatching…
Steve Hemmingsen
  • 383
  • 5
  • 19
5
votes
2 answers

How to watch only a single field in an object in useEffect hook?

export const LocaleProvider = ({ children }) => { const [state, dispatch] = useReducer(reducer, { locale: DEFAULT_LOCALE }); useEffect(() => { const storedLocale = getStoredLocale(); if (storedLocale)…
Henok Tesfaye
  • 8,287
  • 13
  • 47
  • 84
5
votes
3 answers

React Hooks multiple alerts with individual countdowns

I've been trying to build an React app with multiple alerts that disappear after a set amount of time. Sample: https://codesandbox.io/s/multiple-alert-countdown-294lc import React, { useState, useEffect } from "react"; import ReactDOM from…
SILENT
  • 3,916
  • 3
  • 38
  • 57
5
votes
3 answers

Input is loosing focus on hooks update

I'm new to reactjs and I'm trying read data from input. Problem is when I type a sign, my input loose focus. But only when all logic is inside function. When Input with button and logic is in different file - it's working. I don't really know…
michal
  • 71
  • 1
  • 8
5
votes
3 answers

Should I be using _myMethod for functional components?

Recently I've been seeing a lot of examples in blogs where the methods inside React functional components are given an underscore. I also saw this in class-based components and was told it meant they were private (?). But functional component…
Aid19801
  • 1,175
  • 1
  • 17
  • 30
5
votes
1 answer

React get props from Router with React Hooks

I'm trying to refactor my code using React Hooks, and I don't really understand how I can get props passed down to my components via React Routers using Hooks. The old (normal) React code looks like this: App.js import React from 'react'; import {…
Viet
  • 6,513
  • 12
  • 42
  • 74
5
votes
0 answers

React Hooks: useState gives error: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

I want to manage the states using React hooks for following website project: http://konekto.world After following following tutorial: https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c I…
pythonlearner
  • 57
  • 2
  • 11
5
votes
1 answer

Throttling navigation to prevent the browser from hanging in React App

I am working on Login/Register from in React and I am using firebase auth for authentication. When the user logged in I want to redirect the user on the root path or on App component. But I got into an infinite loop which gives me this error…
Eva
  • 377
  • 3
  • 6
  • 12
5
votes
1 answer

How can I improve the react performance if I have many text inputs (Hooks) in a form?

The Problem I have a form to send data through a api rest in React, the render and the writing on the form is very slow when I have about 80 text fields. I'm using functional components with hooks to handle the input texts and Material-UI as UI…
TayLorWebK
  • 57
  • 1
  • 1
  • 6
5
votes
1 answer

How to use useTheme hook from Material-UI?

There is an example of use of useTheme hook on Material-UI website: https://material-ui.com/styles/advanced/#theming And code here: import React from 'react'; import { ThemeProvider, useTheme } from '@material-ui/styles'; function…
kenodek
  • 362
  • 1
  • 2
  • 13
1 2 3
…
99
100