Does a modal (as seen in this example https://react-bootstrap.github.io/components/modal/) force a re-render of everything inside the return statement, or not?
After profiling the render, I confirmed that this sort of modal DOES force a re-render of everything inside the return statement.
Because ReactDOM.createPortal is used internally by the modal, it should be attached to whatever component is causing it to render.
Related
I am trying to display an unsaved changes popup when the user attempts to navigate away from the component. The functionality I am looking for is similar to the window.confirm popup.
I have a function to invoke the popup from the cleanup in useEffect, something similar to this but returning false does not seem to be preventing the unmount.
In my REACT application, I'm trying to render a Component programmatically, but pasing to it any REACT context. Let me show you a simple example with this sandbox: https://codesandbox.io/s/kind-carson-u0hup?file=/src/App.tsx
As you can see, what I want to do is rendering <Dialog> programmatically when I click a button. But, inside that <Dialog>, I want to use any context created on the React Tree.
Unfortunately, I am aware that React.render does not pass any context, thus this cannot work: if you click on the button, you will see that, while the context in <InnerComponent> provides the value 'FooBar'. inside <Dialog> I have the default value 'initialValue'.
Thus, the question is, is there any way I can programmatically render a component, AND passing to its any kind of context?
I'm aware that React.createPortal does pass the context, but that method MUST be called inside the return statement of a component, while instead, in my case, I render the <Dialog> after a click on the Button.
Also, yes, I could always have the <Dialog> rendered, and use a prop isVisible.. But this is a simpler example.
I've read several things (some of these in the following links), but none of these really helped me:
https://github.com/facebook/react/issues/17974
Is it possible to pass context into a component instantiated with ReactDOM.render?
Why component rendered with ReactDOM.render loses react-redux context (Provider)
You can not put the render of component outside of your ContextProvider.
Check this link:
https://codesandbox.io/s/busy-curran-pbz6p?file=/src/App.tsx:0-834
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 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.