I'm new to react and I am trying to get my head around the code in ReactTransitionGroup and I am confused as to Why performEnter is called in componentDidUpdate and not componentDidMount. My understanding of componentDidUpdate is that it is called after render and when the state has altered.
So I'm confused as to why it is called here.
performEnter animates the child, and children are animated in and out when they appear in or disappear from the parent component on subsequent renders—they're not animated if they're already contained in the parent upon the first render.
Related
Our UI designer designed a Tabs component in React. When you select a tab it selects a child to render based on index and only 1 child is rendered at once.
I want to invoke some function calls in child when the Tab becomes active. But componentDidMount is not called.
When the page is first loaded, the initial tabs componentDidMount gets called, but others wont. I guess its because they dont get rendered. But now when i switch to the other tab, it gets rendered but componentDidMount is not called.
So eventhoguh componentDidMount is defined, it never gets called, unless its the initial open tab. How can i make so that switching tabs also invokes the componentDidMount code?
<Tabs><Tab><MyTable/></Tab><Tab><MyTable2/></Tab></Tabs>
MyTable2 has componentDidMount that invokes data loading. But the componentDidMount is never invoked.
Tabs element just renders its children
<div>this.props.children[index]<div/>
And Tab element does same
<div>this.props.children<div/>
You can use componentDidUpdate if you want to do something after props/state changed.
I'm trying to play an animation on dismounting of my component with exit attribute, but it doesn't work despite the presence of !
The input animation works fine but not the output one !
I guess I'm mismanaging the dismounting of my description which is displayed if the props data.show is true, boolean that I change at the click on the project, in short if someone can point me...
codesandbox
Thanks in advance
There are quite a few issues to cover in your code and suggest you first understand what triggers re-rendering in React.
By creating a new uuid key every time you change prop data, you are breaking the ability for React to know which components need to be rendered again so it re-renders them all - so it's always a new instance on AnimatePresence and no way for AnimatePresence to know there has been a change to the key or a change in mounting. Also make use of useCallback hooks when passing in functions to child components to avoid re-renders.
Move the state up to the parent, update the card key to a consistent value between renders, and don't update the entire props data just to expand/collapse.
See the updated sandbox
I suggest that you don’t animate multiple items inline within the same space like this as you will always have the remaining boxes jump a little, but that is another topic.
I'm an embedded developer who is new to React and am struggling a bit with the behaviour of child components and nested child components.
I understand that for any component to be re-rendered, the state must change. I am using an example of a menu component that has an item component within. When some global level event happens, I want to change the text displayed by the item components.
Here is a fiddle that shows some code that I would expect to work:
https://codesandbox.io/s/dark-rain-8mfsp?file=/src/App.tsx
On clicking the div, the menu's setText function gets called, which calls into the item component, setting the state. This state is used in the render function of the item component, so I would expect both item and menu to be re-rendered.
Instead I get an error saying that I can't set the state of an object that hasn't yet been mounted. I would have thought it had been mounted..
Perhaps the way I have linked the declared components with those in the render functions by calling this.componentname.render() is the issue - but how else could that be done?
Thanks in advance!
Here is a working version of your sandbox.
https://codesandbox.io/s/lucid-bird-qecj0?file=/src/App.tsx:0-899
I see that you are new to react. I would suggest you use hooks instead of class components.
I set my component to scale 1.2x when hovered over, however, when the component is re-rendered by React while I'm hovering over it, it loses the hover state for a moment and becomes small, then back to 1.2x, (see image). I want it to stay scaled. How can I work around this?
I had this same issue, and it turns out I was declaring a functional component within a different functional component (as a helper component). When the parent state changed, it re-created the internal component, causing the actual DOM to change.
Moving the internal component outside the main functional component fixed the issue.
So this was a problem because I subscribed the whole React render function to the Redux store, causing every action to force a re-render. This was fixed by using react-redux connect instead of subscribing the render function.
Create a flexbox component on the parent of this component and add the onHover function on it.
Try using react-redux's connect which doesn't re-render on every action.
Because , when you use subscribe the render function to the Redux store,
it causes the every action to forcefully re-render.
A friend of mine is recreating this TV shows guide with React.
Right now he has a prop like moveScrollPosition that handles the scroll when you move the hour scroll. It passes down the prop and moves the guide of the TV shows. The problem comes when you move the programs and it calls the same prop. The programs position moves AND calls the prop to move the guide. There is an infinite loop there, since the hour scroll calls the prop to move the TV shows.
Should he use Redux to store a global scroll position outside? This way both the hour scroll and the TV Shows scroll will call the action and update the scroll position. The TV Shows won't call the same prop, just rely on the prop from Redux as wel as the hour scroll.
To clarify:
1) Hour selector --> Props --> TV Shows
2) TV Shows --> Props --> Hour scroll --> Props --> TV Shows --> loop
Regards.
It doesn't necessarily have to be redux.
In general you need some parent component maintaing the state (scroll position) that would be passed to children as props. It would also need a function to update the scroll position. This function would also be passed as prop to both child components. Whenever child components update the scroll, parent component will have state updated and will pass new value as props to children.
Generally, you need to implements guards to prevent async calls to the backend.
If u call the backend in a componentDidMount or componentWillReceiveProps you may get a rerender when the result comes in, this can lead to a new call to that async method. If there is no guard, you may go into an endless loop.