how to stop update in reactjs - reactjs

Question

I stuck in bit weird situation, I am using ReactJS. I have header container, title bar, title container. Header container has navigation bar. On click of that it effects title bar. I am using react router for that navigation. I am using componentDidMount lifecycle method for that.
Problem with that it triggers only once when title container loads. So I used componentDidUpdate. But in that problem occured when I added title bar component to title container. So now my componentDidUpdate runing in infinite loop. I tried to use shouldComponentUpdate(nextProps, nextState) but I don't know what condition put to return it false.
export class TitleContainer extends React.Component {
componentDidMount() {
this.props.dispatch(fetchDetail(this.props.match.params.program_id))
}
componentDidUpdate(prevProps, prevState) {
this.props.dispatch(fetchDetail(this.props.match.params.id))
}
shouldComponentUpdate(nextProps, nextState){
console.log("current props",this.props)
console.log("next props",nextProps)
// if(this.props.name == nextProps.name)
// return false;
return true;
}
render() {
console.log("data in contaner", this.props)
return (
<div>
<Title name = { this.props.name }
/>
</div>
)
}
}
const mapStateToProps = (state) => {
console.log("update state", state)
return {
programProfileData: state.DetailReducer.Details,
name: state.DetailReducer.name
}
}
export default connect(mapStateToProps)(TitleContainer)

Answer 1

If I understand your problem you would like to fetch other data if you change the params?
If so I would just remount the whole component.
class TitleContainer extends React.Component {
componentDidMount() {
this.props.dispatch(fetchDetail(this.props.match.params.program_id))
}
render() {
console.log("data in contaner", this.props)
return (
<div>
<Title name = { this.props.name }
/>
</div>
)
}
}
const mapStateToProps = (state) => {
console.log("update state", state)
return {
programProfileData: state.DetailReducer.Details,
name: state.DetailReducer.name
}
}
export default connect(mapStateToProps)(TitleContainer)
I think you don't need to use componentUpdate. You navigate to your that address, react router will creates that component, and you can extract the match props.
In your header you can have other Links from the react router dom lib which will replace your existing component. If you click on a link, react router pushes that to the browser history and creates a new component and therefore the params are updated.