Category "react-hooks"

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

How to render svg files with Gatsby Image?

Currently in my project I have a folder with all my svg files, the query to get them from graphql is as follows: query AssetsPhotos { allFile(filter: {extensi

Mocking react-router-dom hooks using jest is not working

I'm using Enzyme's shallow method to test a component which uses the useParams hook to get an ID from the URL params. I'm trying to mock the useParams hook so

react-query how to call mutate from custom useMutation hook in Jest test

I'm running a React Native project where I'm testing custom hooks written with react-query. I'm using Jest, @testing-library/react-hooks and @testing-library/re

React + Material UI - Best way to prevent child tree from remount when toggling parent theme

Background I wanted to follow Material UI's implementation of toggling UI's dark/light mode theme. Link. I have encapsulated its implementation into a custom ho

Message prints in every Dynamic Accordion in ReactJs

I have a dynamic Accordion in ReactJs. I am getting the message from my backend. but it's printing in every Accordion. I'm sharing the code import React, { useS

Storing React form data in a nested object with useState

I'm building out a form with React, and I want to store the form fields in an object with nested data like this: { name: "Test User", email: "[email protected]

How to set initial state for useState Hook in jest and enzyme?

Currently Im using functional component with react hooks. But I'm unable to test the useState hook completely. Consider a scenario like, in useEffect hook I'm d

Uncaught TypeError: inputArgs[0].match is not a function

I am starting to learn to react with REST Countries API. I have to face the error "Uncaught TypeError: inputArgs[0].match is not a function" in console. also, c

Should I wrap every prop with useCallback or useMemo, when to use this hooks?

With react hooks now available should I in case of functional components wrap every function passed with props with useCallback and every other props value with

Other Categories