Questions tagged [react-custom-hooks]
146 questions
7
votes
2 answers
Would a component re-render if state inside of custom hook changes?
In my React app, I have a custom defined hook that holds a useState value internally, but the custom hook itself does not return any values.
If the value of its internal useState changes would this cause the component that calls this custom hook to…
Bear Bile Farming is Torture
- 4,317
- 4
- 27
- 61
7
votes
1 answer
useMutation status is always 'idle' and 'isLoading' always 'false' - react-query
So I use react-query to handle API requests. Current problem is that when i try to submit form data, post request, mutation state is always idle, and loading is always false. I also use zustand for state management.
This is useSubmitFormData hook.…
connecticut96
- 116
- 2
- 8
4
votes
2 answers
How to save to context in custom hook on unmount in React?
I have the following simplified custom hook:
function useSpecialState(defaultValue, key) {
const { stateStore, setStateStore } = useContext(StateStoreContext);
const [state, setState] = useState(
stateStore[key] !== undefined ?…
Laczkó Örs
- 1,082
- 1
- 18
- 38
4
votes
1 answer
React - using AbortController on every request as a custom hook
I have a context provider in my app:
export const FormContext = createContext(null);
function FormProvider({ caseNumber, children, ...props }: PropsWithChildren) {
const {
data: {…
Ludwig
- 1,401
- 13
- 62
- 125
3
votes
2 answers
how to run a custom hook when a prop changes?
I created a custom hook which takes a url and return the data
import { useEffect, useState } from "react";
export function useHttp({ url }: { url: string }) {
const [data, setData] = useState(null);
useEffect(() => {
const controller =…
qwerty
- 33
- 3
3
votes
1 answer
Testing custom hook - not wrapped in act warning
I' trying to test a custom hook but I receive this warning message
console.error node_modules/@testing-library/react-hooks/lib/core/console.js:19
Warning: An update to TestComponent inside a test was not wrapped in act(...).
When…
Michael Garthwaite
- 71
- 1
- 5
3
votes
0 answers
Pass useRef as parameter to custom hook
What's the way to pass a useRef to a custom hook? I'm creating a custom hook to trigger an animation when the user reaches a section with react-intersection-observer and if the user passes more than one the animation doesn't happen again.
If i pass…
Mat
- 119
- 1
- 11
2
votes
0 answers
How to catch the cancellation error on an Axios request? (Custom Hook)
I'm building a custom hook for fetching data with Axios.
When the request is cancelled before the response is received, you will get a cancellation error that couldn't be fetched within the try/catch block. I am able to catch it right after the…
Elwyn
- 21
- 4
2
votes
1 answer
How do you let TypeScript know that the state variable and setter function are different types and not a union type (TS7053)
I've written a custom hook to rotate a 2d array that returns a state, matrix: string[][], and a function to rotate that matrix, rotateMatrix: () => void. When used in a component, TypeScript wants to refer to both 'matrix' and 'rotateMatrix' as a…
ElZilcho
- 23
- 3
2
votes
1 answer
Nock - Get number of calls performed to fetch
I've got a React custom hook that tries to avoid repeated calls to a URL. This is done by storing in state the isLoading prop, which is set to true whenever the fetch method is called, and is set to false once it receives the response from the…
Unapedra
- 2,043
- 4
- 25
- 42
2
votes
1 answer
What is the alternative to return component from react custom hook?
I have encountered a situation where I needed to return 2 react components from custom hook. Just to briefly give you the overview, I have one custom hook where all the required states congregate. Inside the custom hook, I also store the 2…
Nyi Nyi Hmue Aung
- 587
- 1
- 7
- 19
2
votes
0 answers
useInput custom hook with redux state
I'm trying to use a redux store state value in an input, but I have a custom useInput hook, that I can't figure how to make them work together.
I built a react custom useInput hook that handles the value, and change/blur events. Used like:
const {
…
Roni Axelrad
- 399
- 3
- 13
2
votes
1 answer
Apollo mutate without Hook in React custom Hook
I'm calling a custom hook within a React Component:
const [CallMe, { loading, data, error }] = useCustomHook({
onCompleted(res) {
console.log(res)
},
onError(err) {
console.log(err)
},
})
Which is initiated via an…
HireLee
- 561
- 1
- 9
- 25
2
votes
1 answer
how to create a custom hook on react for this current useState usage
I'm currently learning react and custom hooks and I got this, not sure how it's supposed to have a custom hook on this case, what should be the return, what i have to return?, any help for it will be appreciated, thank you in advance
const…
gabriel fuentes
- 45
- 6
1
vote
0 answers
What is the difference between useState Hook and self introduced function?
Problem
This problem is a challenge in the coding challenge posted by quera.
The challenge is to create a new hook to filter the search items based on multiple inputs and update the URL to share the filter to the web-view and the user.
I made change…
Ali Farbooodi
- 11
- 4