Category "react-hooks"

PWA with React: Trying to create a object that updates every second and is accessible for many components

I'm currently working on a PWA build with React. I'm looking for a way to create one object which contains information like the current time (incl. seconds), cu

How to initialize data using map inside useState in ReactJs?

I'm new to React and in the assignment I'm working on, I have to show data in a AG Grid table. For that this is how I'm initializing rowData inside useState(),

useEffect and dependency array

I am trying to understand how react useEffect works with objects. Here is an example that will help demonstrate my question: export function UseEffectHook()

useState hook does not update inside setTimeout function

this code must increase the "count" value gradually from 0 to 600. And each time the "count" value changes it must be logged into the console. But instead, I ge

useCallback with onchange function in React JS

I have 2 components. In the parent component I have this: const Demo = () => { const [state, setState] = useState(true); const onChange = useCallback(

React - Error, Hookrouter invalid hook call

can't handle this error any suggestions? import "./App.css"; import { navigate, useRoutes } from "hookrouter"; const routes = { "/": () => <h1>h

React useContext to pass person object from signup to phone verification

I working on a portal using react and I am trying to pass the form data which is an object from the signup page to the phone verification page so I can verify a

Why does useEffect React Hook not work properly with dependency?

I'm working at a React Web App with Fullcalendar. I think one does not need to know Fullcalendar in order to answer this question. It's rather a matter of React

(Apollo client v3) useLazyQuery custom hook testing

I was struggling with a test issue for my custom useLazyQuery hook. My first test is passing but the second one is failing. What am doing wrong for the second t

Is it possible to pass props from a React Link to a functional component?

I have a sign up/sign on page, and I want to redirect the user to the last page that they visited on the site before they tried to sign up/sign on (or their pro

dom is not updated after state change via Context API

I am quite new to React and tried to finish a project on FrontendMentor. It's basically a simple OPA of an online store with just one product and the ability to

Unable to mock react-redux hooks after migrating to 8

I have been using the following pattern to mock react-redux hooks in tests that use Enzyme shallow rendering: import * as redux from "react-readux"; ... jest.sp

Why isn't my React context being updated?

When I use the app and navigate to the SetContext component, I see the value of auth is correct ("dummy value") and after entering a value in the edit field and

react-video-js-player "No compatible source was found for this media"

I am working on a product that takes a file from API and read as a blob. But pressing the play button on the video does not work. I have tried using tried using

React Transition Group: How to pass ref to mapped component to avoid Warning: findDOMNode is deprecated in StrictMode (still not working)

I am using "React Transition Group" ver 4.4.2 to animate menu buttons (CSSTransitions mapped inside TransitionGroup), but when I click them ones or a couple of

Module '"react"' has no exported member 'SuspenseList'. TS2305

I'm trying to learn some of the new features in React 18, such as the SuspenseList and new useId hook, but I seem to be getting the same error over and over: Mo

how to know if i should use redux for my application or any other alternative?

I am new to react native and mobile development world. I am developing a mobile application with react native, it's basically an entreprise management app for H

setState inside useEffect doesnt update UI

i am trying to fetch multiple endpoints in UseEffect and depending on it's result show data on the UI (avatar, username, etc.) Problem is, that the data receive

React useState - using one State per component vs multiples states? [closed]

What is a better way to optimize and do the code more readable in React using Hooks / Functional components; Having a single setState hook or

IntersectionObserver with React & Hooks

I'm trying to track element visibility with React/Hooks and the Intersection Observer API. However, I can't figure out how to set up observation with "useEffect