Category "react-hooks"

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

React-Router-dom and useHistory. Pushes new URL to history and changes URL but page does not change [duplicate]

I am to create an app which utilizes react-router-dom. I am currently trying to us eversion 5.2.0. I have tried to isolate the issue and focus

Clear Radio buttons on Submit without getting errors

I want to clear the radio button values without getting errors of react in NextJS, i did manage to do in the other fields like in the example below... <div

React hooks: how to instantiate instance variable only once

I would like to derive value from my props using react hooks. I would like to compute this value only once and not on every render. This is the first solution I

How can solve this error "Uncaught TypeError: inputArgs[0].match is not a function"

When login first then immediatly show:- "Uncaught TypeError: inputArgs[0].match is not a function" this error . I'm using react-firebase-auth hook. when I try

react useEffect comparing objects

I am using react useEffect hooks and checking if an object has changed and only then run the hook again. My code looks like this. const useExample = (apiOptio

Compare value inside of use-deep-compare-effect

This is a part of use-deep-compare-effect source code export function useDeepCompareMemoize<T>(value: T) { const ref = React.useRef<T>(value) co

How to use componentWillMount() in React Hooks?

In the official docs of React it mentions - If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDid

How to compare oldValues and newValues on React Hooks useEffect?

Let's say I have 3 inputs: rate, sendAmount, and receiveAmount. I put that 3 inputs on useEffect diffing params. The rules are: If sendAmount changed, I calcul