Questions tagged [react-custom-hooks]
146 questions
0
votes
1 answer
Why or when should I use state within a custom Hook in React?
I am learning about custom Hooks in React. I have taken the following typical example (useFetch) as you can see in https://www.w3schools.com/react/react_customhooks.asp.
import { useState, useEffect } from "react";
const useFetch = (url) => {
const…
Antonito
- 77
- 1
- 9
0
votes
1 answer
forwardRef with custom component and custom hook
Edit: Small changes for readability.
I'm new to react and I may be in at the deep end here but I'll go ahead anyway..
I have a Login component in which I want to give the users feedback when the input elements lose focus and/or when the user clicks…
AndyOh
- 87
- 1
- 9
0
votes
0 answers
React+Jest Testing state change in useEffect
So I've a similar useCase defined in stackover flow answer, but somewhat different. I have a react component and it has two useEffect hooks. One useEffect hook is used at first time render and other once the dependency in that useEffect hook…
Simmi George
- 145
- 1
- 3
- 12
0
votes
1 answer
Type 'number' is not assignable to type 'Element'
I am creating custom hook useArray in react with typescript which perform methods of array like push, update, remove etc. In js it is working fine but in ts there are some errors. below are the code from files:
useArray.ts
import { useState } from…
front_dev_j
- 139
- 1
- 12
0
votes
2 answers
News.jsx:16 Uncaught (in promise) TypeError: (0 , _services_cryptoNewsApi__WEBPACK_IMPORTED_MODULE_2__.useGetCryptoNewsQuery) is not a function
I was trying to fetch data from beingNewsApi with the help of a custom react hook named as
useGetCryptoNewsQuery
const createRequest = (url) => ({ url, headers: cyrptoNewsHeaders });
export const cryptoNewsApi = createApi({
reducerPath:…
0
votes
2 answers
react-testing-library can't test for text rendered from a custom hook
In my react app, I use a custom hook to retrieve localized text from a JSON file with translations. It works fine, but whenever I use testing-library to run tests expecting to find text, the text cannot be found, because the hook has not fired and…
DLateef
- 231
- 1
- 4
- 17
0
votes
1 answer
What is the type of useRef if I want to referenciate a callback?
I am following Dan Abramov's approach to creating a custom hook for a basic setInterval use case. However, I'm having a hard time typing it in typescript. Especially, what should be the type of useRef? Here is the code in js, would love a…
yeahman14
- 75
- 1
- 6
0
votes
1 answer
How to make a custom debounce hook works with a useCallback?
I did search for those related issues and found some solutions, but most about the lodash debounce. In my case, I create useDebounce as a custom hook and return the value directly.
My current issue is useCallback works with an old debounced…
Mia.Zhang
- 31
- 6
0
votes
2 answers
Passing setState as argument to custom hook in react/next.js with typescript
Here is the code that gives me an error:
import { useState, useEffect } from "react";
type Props = {
setState: (value: string) => void;
};
const useSomeCustomHook = ({ setState }: Props) => {
useEffect(() => {
setState("updated value");
…
Dave
- 5
- 1
- 7
0
votes
1 answer
How to change the data received from a custom hook?
I just got into custom hooks and i created a custom hook that fetches data from an API.
interface DataProps {
results: Type[];
isLoading: boolean;
LIMIT: number;
offset: number;
}
interface Pokemon {
name: string;
url:…
yeahman14
- 75
- 1
- 6
0
votes
1 answer
Custom Hooks for Axios
I have made a custom hook (called useApi) over axios call. This custom takes api endpoint(url) and method type as input and return the data as mentioned below:
const [ data, fetchError, isLoading ]= useApi(`/users`,'POST');
Now, calling this hook…
Ekpreet Kaur
- 23
- 5
0
votes
2 answers
How to use the custom hook on click event which contains useEffect and useReducer?
I am using custom hook which contains useEffect and useReducer for API calls and I call this custom hook on button click and I got this error (React Hook "useAuth" is called in function "handleClick" that is neither a React function component nor a…
Haris iqbal
- 47
- 3
0
votes
1 answer
Better Structure for React Custom Hooks that avoid `exhaustive-deps` warning?
I noticed that react’s exhaustive-deps line rule doesn’t always play nice with the setState function or when you abstract out customHooks.
For example, if I have a customHook like:
function useValidation(initialThings) {
const [needsValidation,…
TwoCats
- 11
- 1
0
votes
1 answer
How can I re-trigger a custom hook inside my react component, when its states have not changed?
I have a custom hook for fetching data from the server. It takes 3 parameters, which are pageNumber, pageSize, and keyword. I understand if I set one or more of these parameters, the hook gets re-triggered with the new state. But In my component,…
Sadaf Fara
- 123
- 2
- 10
0
votes
0 answers
Component state being set to initial state in nextJS on OnChange
Not Sure why the value of state each time the onChange is running is equal to initial state value. This means that when I change the value of a component having this onChange attached, only it's value is set and rest all are unset as that's what is…
Abhishek Sharma
- 617
- 1
- 9
- 17