Category "react-hooks"

Calling useState inside useEffect on DOM load

I am building an app to track habits, and when a user is directed to a dashboard, I want them to immediately see their habits as pulled from a database. I have

Take a picture and after successfully receiving a response I we need to call the endpoint - REACT NATIVE

I have a screen where on click on image I need to open camera and take photo, I successfully open camera, take a picture but when I need to call the endpoints i

Lodash debounce error: Uncaught TypeError: Expected a function

I am trying to use the debounce function to avoid multiple calls when I'm typing and searching something in a table. This is what I have done - onChange={(_even

Accessing previous state within a useDispatch method

How do I access previous state inside the callback function in react? Because once I access data it is always returning an initial state version, since I use us

React useCallback() not working as expected

I'm trying to understand useCallback() a bit better by creating a simple React app and playing around with it. I tried wrapping handleClick function in useCallb

Dropdowns and filters not applied with REACT

I'm not able to display my menus (_ids.name) that match my filters from the 2 dropdowns (MyNorm1,...MyNorm6) and (Classification1,...Classification6). For examp

React using state array without mutation

Can the below code be refactored so as to not mutate the state array. Basically, I want that as I navigate the app back and forth via props.history.push, it sho

Is there a way to override what useMemo does to determine if there's a change?

useMemo(() => expensiveFunction(), [deps]) re-executes the expensiveFunction when the deps have changed. I was wondering... is there a way to control how Re

How is the video stream still making it to the peerConnection although I disabled it?

I'm working on a peer to peer webrtc project using react, hooks, and redux. When I make modifications such as disabling the video, I don't see it on the local v

React - .map returning not a function?

I was following this example: https://reactjs.org/docs/faq-ajax.html But my code is returning weather.map is not a function? function App(props) { const [wea

Should I use useImperativeHandle hook when needing multiple refs

I am building component(ThePieChart) where I need to perform quite a bit of DOM manipulation on its elements. Those manipulations I need to perform in parent co

React toggle theme and save it to localStorage and also toggling classes to the html body tag

Please take a look at my code the toggle button is working completely fine but I also want to save the toggle state to localStorage I have tried it so many time

How do I call useQuery in a map function?

I have the below react component which is removing products from a mongodb collection based on the items in the cart. I get this error when I run the code: Comp

Build a CRUD App with React Hooks and the Context API

I want to build a CRUD App with React Hooks and the Context API. my problem is in the EditUser component. when I click on edit button to edit user it doesn't sh

Infinite scroll with React Hooks (setState)

The React app I am doing is to practice fetch from Github's API with React Hooks. Code: https://codesandbox.io/s/lingering-sea-2cdkng When scrolling to the bott

Unit testing useRouter's isReady

I have a component, which takes a parameter from the url and displays it. I implemented it using useRouter's isReady property. Something like this: import { use

Uncaught (in promise) Error: Invalid hook call. - SPECIAL CASE

I know that hooks cannot be called from functions other than React Functional Components, this is a bit different. I have created some utility/service type func

How to make SWR only fetch data when user changes date values?

I'm trying to use SWR, and while it's awesome, it keeps fetching data over and over. I want it to only fetch data again when there has been change to the time i

React Hooks - Using useRef without direct access to HTML Element Code?

With React I'm inside of one repository, and the HTML elements are loading from another repo, which I watch for using pageLoaded. Inside updateHeader there is j

How to cleanup this fetchEvent function used in a useEffect hook? [duplicate]

useEffect(() => { const fetchData = async () => { await fetchEventSource(`/weborders/${agentId}/web_stream`, { method