Questions tagged [react-custom-hooks]
146 questions
1
vote
2 answers
Typescript with React: Using custom hook in useEffect
I'm trying to use a hook inside of a useEffect call to run only once (and load some data).
I keep getting the error that I can't do that (even though I've done the exact same thing in another app, not sure why 1 works and the other doesn't), and I…
HarrySIV
- 115
- 9
1
vote
2 answers
When uploading a file to react I'm able get the progress of the upload but unable to pass it back to the progress bar. Would a custom hook work here?
I have a material-ui LinearDeterminate progress bar, and I would like to pass on how far along the upload is.
const LinearDeterminate = ({ uploadPercentage, setuploadPercentage }) => {
const classes = useStyles();
const [uploadPercentage,…
Andrew Kloos
- 4,189
- 4
- 28
- 36
1
vote
1 answer
How to use useMemo and use Effect efficiently to load React Table data from an api using axios
I have a table that displays users List. It fetches the data from my backend server. when i try to fetch data its takes (4 render ) to Get the actual data. How can i use useEffect and useMemo to avoid re-render. iam using a custom hook to fetch the…
Shyam
- 21
- 4
1
vote
2 answers
Access API response data from a custom React hook
I created a custom React hook to return a function and the returned function takes a config object and makes Axios API calls, the custom hook has three states loading, error and data which is also returned from the custom hook. see this codesandbox…
Neenus
- 134
- 3
- 12
1
vote
0 answers
Next.js - React Custom Hook throws Invalid hook call
Hi I am quite new to react and this is for a learning project.
In react under next.js want to check for the existence of a certain folder on the server. To achieve that I implemented an api twigExists.js in pages/api and a custom hook…
ejoo
- 51
- 1
- 7
1
vote
2 answers
Can only call function exported/deconstructed with curly braces but not square brackets
In a basic React custom hook in which the only difference is returning with [ ] or { }:
const useCustomHookSquare= () => {
const [state, setState] = useState(initialState);
return [state, storeBounceBox];
}
const useCustomHookCurly= ()…
HigoChumbo
- 858
- 2
- 9
- 23
1
vote
0 answers
How can I test the custom fetch hook with dummy data?
I have a custom fetch hook. It is not doing a real fetch process.
It's an implantation example. I want to write a proper test for it.
This is the pseudo API.
import { data } from './data';
import { IProduct } from '../common/types';
// pseudo…
ffcabbar
- 351
- 1
- 3
- 18
1
vote
2 answers
Value of state imported from custom hook not showing
I created a custom hook, Custom.js:
import React, {useState, useEffect} from 'react';
import Clarifai from 'clarifai';
const app = new Clarifai.App({
apiKey: 'XXXXXXXXXXXXXX'
})
const Custom = () => {
const [input, setInput] =…
joshua
- 67
- 1
- 6
1
vote
1 answer
How to make a custom hook wait for another one that has to return the input parameter of the first one
It looks like a tongue twister.
The case is that I have a custom hook let's call it hookFather and others within it hookChild1, hookChild2, ... the case that I need the value of hookChild2 but a value that should be returned to me after hookChild1…
FlaskDev
- 25
- 6
1
vote
1 answer
React - useEffect - Undefined variable inside useEffect
I have this situation and I don't know why is happening..
I have a custom hook that holds a variable that I can't initialize until another function is executed.
I think it's not about a sync situation because the console.log( '..', name ) is showing…
Mauricio Etchevest
- 101
- 2
- 6
1
vote
1 answer
Can I call a functional component inside a custom hook? Is it okay for such a hook to be a .tsx, not .ts files?
I made a custom hook that wraps Chakra's custom hook. Chakra UI is a component library.
export const useToast = () => {
const chakraToast = useChakraToast();
// ...
const toast = ({ id, title, delay, position = `bottom-right` }: Options) =>…
ellis
- 181
- 10
1
vote
3 answers
Couldn't create collection in firebase?
I'm trying to create a collection if not exist and uploading img file.
I'm receiving upload image URL and progress to but it is not creating collection named images.
const useStorage = (file) => {
const [progress, setProgress] = useState(0);
const…
Digamber negi
- 407
- 1
- 7
- 20
1
vote
0 answers
Can't type text in my input fields in my form (Utilizing a React custom hook for input handling)
Ok, I am creating a fairly large form in React (only showing three of the fields here), and thus want to utilize a custom hook for the handling.
I found an article explaining a way to do this, however, when I try to type text in my input fields they…
Jeppe R
- 113
- 1
- 8
1
vote
2 answers
Passing types as arguments in Typescript
i've written a custom hook to help me not repeat code for some fetch calls. it looks like this:
export const useCustomQuery = ({ endpoint, body, dataPoint }: args) => {
const [data, setData] = useState()
useEffect(() => {
…
Red Baron
- 7,181
- 10
- 39
- 86
0
votes
0 answers
Invalid hook call when I use useInterval
when I make carousel with react, I want to use useInterval custom hook, but this error maked, I don't know reason
useInterval hooks:
function useInterval (callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
…
장호정
- 1