I tried to do the same with the useEffect hook, but it seems state is not correct in the return function of useEffect. The reason for this is due to closures. A closure is a function’s reference to the variables in its scope. Your useEffect callback is only ran once when the component mounts and … Read more
There’s no need to bind functions/callbacks in functional components since there’s no this in functions. In classes, it was important to bind this because we want to ensure that the this in the callbacks referred to the component’s instance itself. However, doing .bind in the constructor has another useful property of creating the functions once … Read more
The first will run the effect on mount and whenever the state changes. The clean up will be called on state change and on unmount. The second will only run the effect once on mount and the clean up will only get called on unmount. The last will run the effect on mount and whenever … Read more
You can largely ignore the TS error because you didn’t provide types for the forwardRef arguments so it doesn’t know that ref/innerRef are equivalently typed. const divElement = ref || innerRef; <div ref={divElement}></div> I don’t understand this bit – do you want it to have a reference to the div element directly regardless of if … Read more
You should use useCallback instead of useRef as suggested in the reactjs docs. React will call that callback whenever the ref gets attached to a different node. Replace this: const elRef = useRef(null); useEffect(() => { console.log(“ref”, elRef.current); }, [elRef.current]); with this: const elRef = useCallback(node => { if (node !== null) { console.log(“ref”, node); … Read more
useRef is generic if you use it with TypeScript, so you can define the referenced element type like const ref = useRef<Type>(); Looking into the type definitions for the inputRef property in MaterialUI it states: /** * Pass a ref to the `input` element. */ inputRef?: React.Ref<any>; So for a fix you can define your … Read more
Create an async function inside your effect that wait the getData(1) result then call setData(): useEffect(() => { const fetchData = async () => { const data = await getData(1); setData(data); } fetchData(); }, []);
I had a similar concern that was fixed with this issue from react router I would suggest you change the mock as is: // pay attention to write it at the top level of your file const mockedUsedNavigate = jest.fn(); jest.mock(‘react-router-dom’, () => ({ …jest.requireActual(‘react-router-dom’) as any, useNavigate: () => mockedUsedNavigate, })); // your describe/it/test … Read more
Everything I can find on this seems to link back to this github issue circa 2016. I’ll quote verbatim from there since it doesn’t appear to have been covered on Stack Overflow before and it explains things pretty thoroughly: .then(() => { this.setState({ loaded: true }) }) .catch(()=> { console.log(‘Swallowed!’) }); Your catch() handler is … Read more
This works for me to mock useParams and change values for each unit test within the same file: import React from “react”; import { render } from “@testing-library/react”; import Router from “react-router-dom”; import Component from “./Component”; jest.mock(“react-router-dom”, () => ({ …jest.requireActual(“react-router-dom”), useParams: jest.fn(), })); const createWrapper = () => { return render(<Cases />); }; describe(“Component … Read more