How can I prevent React from unmounting/remounting a component?
Date : March 29 2020, 07:55 AM
To fix this issue React’s Reconciliation Algorithm says that if the element has a different type (in this case, EditNew and EditDraft), then React will “tear down the old tree and build the new tree from scratch.” To prevent this, you need to use the same component for both routes.
|
Force remounting component when React router params changing?
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I've written a simple app where the remote resources are fetched inside componentDidMount functions of the components. , Do the following the route shoul look like this. <Route path='/movie/:movieId' component={Movie} />
class Movie extends Component {
loadAllData = (movieID) => {
//if you load data
this.props.getMovieInfo(movieID);
this.props.getMovie_YOUTUBE(movieID);
this.props.getMovie_SIMILAR(movieID);
}
componentDidMount() {
this.loadAllData(this.props.match.params.movieId);
}
componentWillReceiveProps(nextProps){
if(nextProps.match.params.movieId !== this.props.match.params.movieId) {
console.log(nextProps);
this.loadAllData(nextProps.match.params.movieId);
}
}
render(){
return( ... stuff and <Link to={`/movie/${id}`} key={index}>...</Link>)
}
}
|
Prevent remounting of layout component if react router params stay the same
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , I think the problem here is that Explore and Map each get their own instance of MapExploreContainer which is unmounted when each of those components is unmounted. You can try something like the following: function App() {
return (
<Router>
<div>
<Links />
<Route exact path="/" render={() => <h1>Home</h1>} />
<Route path="/(map|explore)/:id" component={MapExploreContainter} />
<Route path="/map/:id" render={({ match }) => <Map match={match} />} />
<Route
path="/explore/:id"
render={({ match }) => <Explore match={match} />}
/>
</div>
</Router>
);
}
|
Why state change in App.js cause component remounting?
Date : March 29 2020, 07:55 AM
like below fixes the issue In App.js file I am doing routing (for routing I am using react-routesv4). With routes there is also sidebar. Cause of sidebar I have state that is controling that sidebar. Whenever sidebar state is changed other component that is connected with current route is remounting. , This is due to the HoC being evaluated every render. Try: const AuthorisedComponent = requireLogin(MyComponent); // instantiate hoc once
<Route path="/mycomponent" component={AuthorisedComponent} /> // use hoc
|
Prevent remounting of expensive (class) component with shouldComponentUpdate() (List of images, inside router)
Date : December 25 2020, 06:45 AM
I hope this helps you . That's because the PhotoView in App.js is defined inside render method, so when state update causing the render, then the PhotoView redefined again. It's a new component every time for The App component. Please define components outside the render function: import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Year from "./Year";
import Viewer from "./Viewer";
import dataObj from "./dataObj.json";
import "./App.css";
class App extends React.Component {
constructor(props) {
super(props);
this.PhotoView = this.PhotoView.bind(this)
this.state = {
current: {
year: 2019,
url: ""
},
viewerData: [],
photoData: null
};
}
componentDidMount() {
this.setState({
photoData: dataObj
});
}
addToViewer = moment =>
this.setState(state => {
const viewerData = state.viewerData.concat(moment.props.data);
return {
viewerData,
value: ""
};
});
About() {
return (
<div>
<h1>About</h1>
</div>
);
};
PhotoView(url) {
return (
<div className="PhotoView">
<Year
setCurrent={this.setCurrent}
photoData={this.state.photoData}
addToViewer={this.addToViewer}
/>
<Viewer
viewerData={this.state.viewerData}
setCurrent={this.setCurrent}
/>
</div>
);
}
render() {
return (
<div className="App">
<Router>
<nav>
<Link to="/about">About</Link>
<Link to="/">Photo View</Link>
</nav>
<Switch>
<Route path="/about" exact component={this.About} />
<Route path="/" component={this.PhotoView} />
</Switch>
</Router>
</div>
);
}
}
export default App;
|
Boards Message :
Related QUESTIONS :