Questions tagged [react-custom-hooks]
146 questions
1
vote
1 answer
Updating the state within a custom hook is not reflected in subscribing components
I have created a hook useToken which tracks and updates the state of my access and refresh token.
When the app is started, the tokens are pulled from localStorage and are refreshed updating the values of the hook's state as well as the values in…
Joosh
- 33
- 5
1
vote
1 answer
Invoke custom hook after the component is mounted
I'm trying to use useObserver hook to make endless pagination but when I pass first parameter which is the loader I get an error "Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'." because I render this…
Lilly
- 90
- 8
1
vote
1 answer
Accessing currentStepIndex from useMultiStepForm hook outside of its scope without causing reference error
I'm using a custom hook called useMultiStepForm to manage a multi-step form in my React application. The hook provides the current step index (currentStepIndex) among other functionalities. I need to access the currentStepIndex value outside of the…
Mohamed Rifkan
- 7
- 2
1
vote
1 answer
How to avoid calling custom hooks conditionally
In a React function component (with TypeScript) I need to call two different custom hooks depending on a prop's value, considering that each hook is called through its own service by requesting an API which is forbidden for the other hook.
As React…
Fred B.
- 21
- 1
1
vote
1 answer
how to use customHook properly in Reactjs
i am creating a custom hook useFetchCollection that fetches data collection from firebase storage and displays it in the viewProduct.jsx, so the issue is that whenever i set the state of useFetchCollection in my viewPRoduct it gives me an error, so…
Cable-Nerd
- 43
- 5
1
vote
2 answers
Function Declaration of useIsFirstRender()
I am working on a React coding challenge (problem link) and the solution is here.
In the problem, the custom hook returns true for the first render, otherwise returns false.
import { useRef } from "react";
export function useIsFirstRender():…
PinTheKnight
- 17
- 3
1
vote
1 answer
Custom hook taking parameters from another function
I am having a progress bar which on click starts its progress from 60 to all the way upto 10 for each of the file of files array. I am a using the ref to dymanically increment the progress by 10 and when its 100, I clear it and bring the message as…
lrr59
- 137
- 5
1
vote
3 answers
Show/Hide Components From Other Components in ReactJS
I have a custom hook written to show or hide a list when a button clicked. Below is the custom hook snippet I have written:
import { useEffect } from "react";
import { useState } from "react";
function useVisibilityStatus() {
const [isVisible,…
Cham
- 787
- 3
- 11
- 25
1
vote
1 answer
Hooks can only be called inside of the body
I created a custom hook usePostCategory to post a new category. The hook is called from another component, but when I try to do it, I receive an error:
" Invalid hook call. Hooks can only be called inside of the body of a function component".
Just…
Giovanni
- 512
- 2
- 6
- 23
1
vote
2 answers
useFetch custom hook error state not in sync with component that use it
I made custom useFetch hook that is responsible for sending request to the API.
Hook returns object with isLoading state, error state and function that triggers fetch request.
Problem is when i use it in component and i trigger sendRequest function…
saksonia
- 11
- 2
1
vote
3 answers
use Custom hook in a non functional api file
I have a api file that I would like to store all my api calls and use react query to call those api function, however I have some endpoint which are private and I use a custom hooks for that logic. Issue is I cannot call the custom hook in the api…
louis
- 422
- 1
- 4
- 14
1
vote
1 answer
REACT useLocalStorage custom hook is difficult to understand
It is difficult for me to understand this custom React hook. The code works, but I understand only some parts. It is a useLocalStorage hook. I will be grateful for any feedback.
This is my App.js file.
import "./App.css";
import useLocalStorage…
Dalibor Pavlik
- 143
- 10
1
vote
2 answers
Invalid value for prop `reset` on tag
I was getting this warning:
react-dom.development.js:86 Warning: Invalid value for prop reset on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see…
Juan41
- 25
- 6
1
vote
2 answers
How do I get to use img from custom hook object?
I'm trying to iterate over an array in a custom hook in order to use an img, however the img doesn't display.
What am I doing wrong as I don't want to manually create a img tag in order to display all images.
import useData from "../useData";
//…
Nyah Mukassa
- 11
- 4
1
vote
1 answer
Data Acces Objects Factory Design Pattern in React?
I'm currently going through some tutorial about React Design Patterns, subject: Custom Hooks.
While the concept feels awesome and seems familiar to me, the solution below provided by the tutor made me question how to deal with different data…
Programmosaurus
- 111
- 1
- 8