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

Trying to use cleanup function in useEffect hook to cleanup img.onload

I recently built a React component (called ItemIndexItem) which displays images on my application. For example, I have a Search component which will show an index of filtered Items. Each Item displayed is an ItemIndexItem component. Clicking an…
owenshaupt
  • 59
  • 1
  • 5
5
votes
1 answer

Invariant violation when using react apollo hooks alongside query components

I'm beginning our migration from Apollo Client 2.x to 3.x beta, and I'm having trouble using both the apollo hooks and the now deprecated query/mutation components. I'm using the packages: @apollo/client: 3.0.0-beta.4 @apollo/react-components:…
Davis Mariotti
  • 574
  • 1
  • 4
  • 23
5
votes
2 answers

How do I keep state persistant using local storage, react hooks, and Context Provider

I'm implementing authentication into my app, the issue I am having is on refresh the state is not persistent so I get redirected back to the login screen. How can I use React Hooks to check if there is an authToken in local storage to keep me logged…
EzJS
  • 219
  • 1
  • 4
  • 12
5
votes
2 answers

ReactJS: Why different values from one state?

So I'm getting into Reactjs with very basic component. I'm logging out the same state from different functions, but what I'm seeing is the different values. import React, { useState, useEffect, useRef } from "react"; const Test = props => { const…
lvdev
  • 53
  • 3
5
votes
1 answer

React: incorrect examples of calling Hooks inside loops and nested functions

The first rule of Hooks is to only call hooks at the top level, i.e. "Don’t call Hooks inside loops, conditions, or nested functions". The docs explains pretty clearly with an example for calling Hooks inside conditions, but not for the other two…
Glenn Mohammad
  • 3,871
  • 4
  • 36
  • 45
5
votes
3 answers

React functional component - how to count instances?

I need to be able to track number of instances of my component, how do I do that in React using functional components? I tried to use useRef() but it seems like even though it preserves the value between the renders - it does not share the value…
SmxCde
  • 5,053
  • 7
  • 25
  • 45
5
votes
1 answer

Use state variable in ag grid callback not updating

My use state variable, query, inside of the function isExternalFilterPresent never updates. I'm perplexed because the first console.log of query updates with each change of query. I think this is because I'm not quite understand the implementation…
Jstuff
  • 1,266
  • 2
  • 16
  • 27
5
votes
1 answer

React useEffect (with []) is called every time I change page (React Router)

I prepared small demo for the problem: Demo So I am using react-router-dom to create Single Page Application and I created standard navigation between two pages (components Page1 and Page2). Problem is that every time I switch between pages then…
kampar
  • 53
  • 1
  • 3
5
votes
2 answers

React: How to call react hooks inside the event handler?

I have the following code inside a react functional component. When I click the button and run the handler, an error occurs: Invalid hook call. Hooks can only be called inside of the body of a function component. const handleClick = () => { const…
5413668060
  • 326
  • 2
  • 15
5
votes
1 answer

Invalid hook call. Hooks can only be called inside of the body of a function component using react-apollo

I get this error trying to use react-apollo from a public graphql api. 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: You might have mismatching…
Ghasem
  • 14,455
  • 21
  • 138
  • 171
5
votes
3 answers

React hooks and functional component ref

const Comp1 = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ print: () => { console.log('comp1') } }), []); return
comp1
}); const Comp2 = () =>
comp2
; const App = () => { const ref1 =…
Ben
  • 871
  • 2
  • 9
  • 18
5
votes
3 answers

useEffect hook not firing on orientation change

I am trying to change the height of a container, when in mobile landscape mode only. I am playing around in the developer tools to swap the orientation of a mobile device but it only works on the first render. I am new to react hooks so not sure if…
mark
  • 235
  • 3
  • 11
5
votes
0 answers

React Hook useCallback has a missing dependency. Either include it or remove the dependency array react-hooks/exhaustive-deps

I used useEffect in my component in order to execute an async function. useEffect(() => { scoreRequest(answers); }, [answers]); Then I get this warning: React Hook useCallback has a missing dependency: 'scoreRequest'. Either include it or…
Slim
  • 5,527
  • 13
  • 45
  • 81
5
votes
2 answers

When does React re-render after a setState call made inside an event handler

From React DOCS: https://reactjs.org/docs/state-and-lifecycle.html State Updates May Be Asynchronous React may batch multiple setState() calls into a single update for performance. This makes total sense. If you have something like the function…
cbdeveloper
  • 27,898
  • 37
  • 155
  • 336
5
votes
1 answer

Testing a custom context hook that uses a useEffect hook and apollo

I have created a context that exposes a hook for ease of use. Within this hook i already make sure that some data is preloaded before rendering the page, like this: export const MyContext = React.createContext({} as any); function useMyContext()…
Maxim
  • 3,836
  • 6
  • 42
  • 64
1 2 3
…
99 100