Category "react-hooks"

useinterval in react (polling request)

I've created a simple react (nextjs) app that sends some data to a backend server. While the data are being processed the react app keeps track of the progressi

React State update with button click from another component

Please read the details below of code enter image description here This MegaMenu Component import MenuIcon from '@mui/icons-material/Menu'; import './MegaMenu.c

Trying to run function only if state changes

I want to run the set totals function only if the hour's state has changed. It is running every time the component mounts instead of only if the value changes.

Using function defined in custom hook does not update some value in the state

i recently started using react and i'm trying to write a custom hook used for translating some ui elements. I'm not using a library because it is a larger proje

Functional Component: Write functions inside or outside the component?

I often wrote functional components following a 'Class architecture' where all my function that concern the component are written inside of it like a method in

React showing a blank screen without any error messages (context api used)

I'm building a react Amazon clone, so in order to give the user the ability to add a product into his basket (as the first version of all the future checkout sy

React Native Text style is not working (Icon Badge)

I tried to make a badge icon with red text, but all the styles I applied to the Text didn't work at all IconWithBade.js import React from 'react'; import {Style

How to fix my old react project not working as expected?

I'm new to react and have just added some regex validation to a jsx file in an existing react project (created about 4 months ago) . After building a new bundle

How to toggle boolean state in React and TypeScript?

I am new to React and TypeScript. I want to toggle a boolean state (true/false) with a handler function. I've read other posts about how to do this in ES6 but

useInfiniteQuery but all the data re-rendered every refetch

I'm trying pagination by useInfiniteQuery in React Query, it's refetch data perfectly, but there's a problem that each time new data added, the page re-render a

How to prevent re-rendering with useSubscription()?

Many of you might have heard of GraphQL. It provides QUERY and MUTATION. Also it supports SUBSCRIPTION as 100% replacement of web socket. I'm a big fan of Graph

React custom mount hook

I always forget to add empty dependencies array in my useEffect hook in React to run the effect only once. That's why I decided to use a custom hook with a clea

Call api before first render in functional component in React.js

If I want to call API after the first rendering of component, I know we have useEffect hook to call the API method. (I am talking about functional components on

React useCallback with Parameter

Using React's useCallback hook is essentially just a wrapper around useMemo specialized for functions to avoid constantly creating new function instances within

How can we use useEffect for multiple props value changes

How can we identify props changes in functional component?. Sample code here. Can you please help me to convert this componentDidUpdate method to functional com

React Drag and drop reordering bug

I have a weird bug that I'm trying to solve, sandbox here: https://codesandbox.io/s/drag-and-drop-with-reordering-test-i9f0j3 Basically, the reordering doesn't

How to mock react custom hook returned value?

Here is my custom hook: export function useClientRect() { const [scrollH, setScrollH] = useState(0); const [clientH, setClientH] = useState(0); c

Why is localStorage getting cleared whenever I refresh the page?

Like the title says, the localStorage I set registers the changes made to the todoList array and JSON.stringifys it; however, whenever I refresh the page the ar

useState vs. useEffect - setting initial value

I have two basic questions about React: In order to assign an initial empty value to a piece of state (let's say player) in a functional component, are the foll

Show total number of selected filters array of items in React

I have the following problem. In widgetFilters array (length===3) i want to show the numbers of selected items in the header of the Filter. const [selectedFil