Questions tagged [react-custom-hooks]
146 questions
0
votes
1 answer
useFetch custom hook to work on mount and on click of a button (tryAgain in case of error)
I have this useFetch custom hook
export function useFetch(initialState, url, header) {
const [value, setValue] = useState(initialState);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
…
LightSkyLiam
- 11
- 1
0
votes
1 answer
Want to implement with click of "Enter" key react-form to trigger submission using react-form hook
If I try to call handleSubmit(Submit)() function of react-form-hook inside a custom hook it is being called but do fails to take input value and throws validation error.
My attempt-
import React, { useEffect, useRef, useState } from "react";
import…
Priyanka Chaurasia
- 29
- 1
- 2
0
votes
0 answers
React testing library custom hook(useLocalStorage) test got failed
This is my useLocalStorage.tsx file
function useLocalStorage() {
const getItem = (key: string) => {
if (typeof window !== "undefined" && window.localStorage) {
let requestedItem = localStorage.getItem(key) as string;
return…
0
votes
3 answers
Too many re-renders. React limits the number of renders to prevent an infinite loop. when i am using custom hooks
**i have been stuck with this issue where i am getting this error i have made this custom hooks for validation which i wanted to use in registration form..
**
import { useState } from 'react'
function useValidate(formData) {
const…
parth shinde
- 3
- 2
0
votes
1 answer
Private route fails due to asyncronous API call
Here I've created a custom hook and i'm trying to refresh the auth token and setting the isAuthenticated state to true once this request is complete.
const useAuth = () => {
const [isAuthenticated, setIsAuthenticated] = useState();
const…
Hrithik Naha
- 115
- 8
0
votes
1 answer
Why I cannot create my own custom hook in js?
I was trying to make my Editor a custom hook so I created 'useEditor' hook like this
import { useState, useEffect } from 'react';
import ReactQuill from 'react-quill';
import MathEditor from './MathEditor';
//some other imports
function…
lighthouse
- 3
- 5
0
votes
1 answer
How do I do a unit test of a component with a React Query custom hook?
I am practicing because I am interested in the React Testing Library with Jest.
I'm writing a unit test of the component, but I keep getting errors, so I'd like to ask you a question.
First, I am writing a component for webtoon information and there…
김정수
- 611
- 4
- 9
- 22
0
votes
1 answer
Custom hook setState call from inside form submission handler is not updating the state
My fields in the form require that I focus on them for the error messages to appear. I want the error messages to occur when I click on submit when I haven't focused the fields yet.
Here's the hook (the doubt is about the setIsTouched call…
Reuben B
- 184
- 1
- 6
0
votes
1 answer
custom hook doesn't update when parent state changes
I'm new and may have said the terms wrong
I tried to write an infinite scroll from the code below
github
By running the app, a few basic items are taken from the API, and when I scroll down, start changes, but a new request to get data is not…
MnR
- 3
- 1
0
votes
0 answers
How to pass user entered value into custom hook in React?
I created a React custom hook named useApiRequest. I have a input component and the idea is that I want to pass the user input into the custom hook as parameter so that the custom hook fetch the data based on user input. But i can't find a way to do…
0
votes
0 answers
How can I send an API request using AxiosHook and use the response immediately? REACT
I've been working on a way to make a general API request caller through a custom Axios hook.
const useAxiosFunction = () => {
const [response, setResponse] = useState([]);
const [error, setError] = useState('');
const [loading,…
REA1990
- 1
- 1
0
votes
0 answers
Why not use a custom hook instead of useReducer?
I am learning about custom hooks and useReducer in React.js. Here is an example (sandbox) to illustrate useReducer adapted from the course Modern React with Redux:
import "./styles.css";
import { useReducer } from "react";
const INCREMENT_COUNT =…
AlwaysLearning
- 7,257
- 4
- 33
- 68
0
votes
1 answer
custom hook useEffect issue?
I have 2 custom hooks. one is to handling token (useToken) and another is for just decoding user by token (useUser). Now I want updated token each time in my custom-hook useUser but it never triggers, I have added [token] as dependency but no…
Nisarg Parikh
- 3
- 1
0
votes
2 answers
how to create a "concurrent queries limit" custom hook using react-query?
I need to build a system to fetch a unknown number of documents (images, pdfs etc...) to a page.
I have a request that returns to me a list of documents and some metadata, which I then need to fetch so they can be displayed.
I am trying to make a…
ToM
- 3
- 2
0
votes
2 answers
useQuery runs 4 times instead of 1 and then stops with an error message, in react
I'm using useQuery inside a custom hook, called usePostData. this is the custom hook code:
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
const usePostData = (queryKey, endPoint, object) =>
useQuery(
[queryKey],
…
Jonathan Ribak
- 13
- 3