I’ve initialized a state that is an array, and when I update it my component does not re-render. Here is a minimal proof-of-concept: Based on this code, it seems that the input should contain the number 0 to start, and any time it is changed, the state should change too. After entering “02” in the input, the App component does
Tag: react-hooks
useMemo vs. useEffect + useState
Are there any benefits in using useMemo (e.g. for an intensive function call) instead of using a combination of useEffect and useState? Here are two custom hooks that work exactly the same on first sight, besides useMemo’s return value being null on the first render: useEffect & useState useMemo Both calculate the result each time their parameter someNumber changes, where
React Using useState/Hooks In HOC Causes Error “Hooks can only be called inside of the body of a function component”
Is it not allowed to use hooks inside of a Higher Order Component? When I try to do it with this simple pattern I’m getting the error Invalid hook call. Hooks can only be called inside of the body of a function component. Answer I believe you should use the hooks inside the HOC:
Refactoring from classes to functions – ways to enhance in functions
I am trying to rewrite class components to functions. Often, I have an enhanced component as class property: When writing function, I have to move the enhancing outside of function body, or it will get re-mounted on each render. Table is an external Component (devexpressGrid), but I suppose it does something like this: Is there a way, to still pass
How to make sure a React state using useState() hook has been updated?
I had a class component named <BasicForm> that I used to build forms with. It handles validation and all the form state. It provides all the necessary functions (onChange, onSubmit, etc) to the inputs (rendered as children of BasicForm) via React context. It works just as intended. The problem is that now that I’m converting it to use React Hooks,
React useState hook event handler using initial state
I’m still getting my head around react hooks but struggling to see what I’m doing wrong here. I have a component for resizing panels, onmousedown of an edge I update a value on state then have an event handler for mousemove which uses this value however it doesn’t seem to be updating after the value has changed. Here is my
Setting state of nested array with React Hooks
I have been working with React Hooks for a while, but the biggest problem for me is working with arrays. I am making a register form for teams. Teams have players (array of strings). The user should be able to add a team, and for each team, an input is shown with the current members in the team displayed above
React useEffect causing: Can’t perform a React state update on an unmounted component
When fetching data I’m getting: Can’t perform a React state update on an unmounted component. The app still works, but react is suggesting I might be causing a memory leak. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.” Why do I keep
How can I use multiple refs for an array of elements with hooks?
As far as I understood I can use refs for a single element like this: How can I implement this for an array of elements? Obviously not like that: (I knew it even I did not try it:) I have seen this and hence this. But, I’m still confused about how to implement that suggestion for this simple case. Answer
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. Unfortunately it keeps running as the objects are not being recognised as being the same. I believe the following is an example of why. Perhaps running JSON.stringify(apiOptions) works? Answer Use apiOptions as state value I’m