To first clarify the existing behavior, the STATUS_FETCHING action was actually only being “dispatched” (i.e. if you do a console.log right before the dispatch call in getData within useApiCall.js) once, but the reducer code was executing twice. I probably wouldn’t have known what to look for to explain why if it hadn’t been for my … Read more
I wouldn’t recommend either useState or useRef. You don’t actually need any hook here at all. In many cases, I’d recommend simply doing this: const MyComponent = () => { const handleClick = (e) => { //… } return <button onClick={handleClick}>Click Me</button>; }; However, it’s sometimes suggested to avoid declaring functions inside a render function … Read more
adding import React from “react” React.useLayoutEffect = React.useEffect to my frontend/src/setupTests.js test file is a way to suppress the jest warning. Ultimately, this looks to be an issue with Material-UI components having issues with Jest.
The key in understanding this is the following paragraph from the Hooks FAQ How does React associate Hook calls with components? React keeps track of the currently rendering component. Thanks to the Rules of Hooks, we know that Hooks are only called from React components (or custom Hooks — which are also only called from … Read more
One thing that’s not clear in the above answers is the order in which the effects run when you have multiple components in the mix. We’ve been doing work that involves coordination between a parent and it’s children via useContext so the order matters more to us. useLayoutEffect and useEffect work in different ways in … Read more
As it is alluded to in the comments, useState(initialState) (or whatever you call it) will only use initialState on the first render. During the initial render, the returned state (state) is the same as the value passed as the first argument (initialState). (React Docs, emphasis mine) After this, on re-renders the useState function does not … Read more
To put it simply, both useState and useEffect enhance functional components to make them do things that classes can but functional components (without hooks) cannot: useState allows functional components to have state, like this.state in class components. useEffect allows functional components to have lifecycle methods (such as componentDidMount, componentDidUpdate and componentWillUnmount) in one single API. … Read more
Not sure i fully understand your intent, but i think you want something like this: const { useState, useRef, createRef, useEffect } = React; const data = [ { text: “test1” }, { text: “test2” } ]; const Component = () => { const [heights, setHeights] = useState([]); const elementsRef = useRef(data.map(() => createRef())); useEffect(() … Read more
This question is pretty opinion-based but there are few notes that you need to think about. Declaring the function outside of scope is foremost for readability and reusability. // Reuse logic in other components const counterAsFloat = (counter) => { return counter.toFixed(2); }; // If Counter has complex logic, you sometimes want to compose it … Read more
As far as I know, the hooks in a component should always be in the same order. And since the useEffect happens sometimes and not every render that does break the rules of hooks. It looks to me like your useGetDocument has no real need. I propose the following solution: Keep your useGetDocument the same. … Read more