Simple example but not sure why I can't get it to work:
class Grid extends React.Component { componentDidUpdate = () =>{ alert('Should Fire') } render() { return (<div>{this.props.name}</div>) } } class Application extends React.Component { render() { return (<div><Grid name="test-grid" /></div>); } } The componentDidUpdate method does not fire in the Grid class. Insight?
Instead you can use componentDidMount(). You are not updating the props which should trigger update event. See from the documentation of componentDidUpdate():
componentDidUpdate()is invoked immediately after updating occurs. This method is not called for the initial render.
As the following:
class Grid extends React.Component { componentDidMount = () =>{ alert('Should Fire') } render() { return (<div>{this.props.name}</div>) } } I hope this helps!
componentDidUpdate supposed to fire AFTER the component renders? That's why I am using this method - I need access to wha's rendered in the DOM.componentDidUpdate function only fires when the parent component re-renders causing the child to re-render.
In your case the parent isn't re-rendering at all. Its just the initial render.
To detect an initial render, you would make use of componentDidMount function. You can see the componentDidUpdate function being fired if you have a state in parent that you update based on an interaction or any other way
class Grid extends React.Component { componentDidMount(){ alert('Should Fire') } componentDidUpdate() { alert('ComponentDidUpdate Should Fire'); } render() { return (<div>{this.props.name}</div>) } } class Application extends React.Component { state = { count: 0 } render() { return ( <div> <Grid name="test-grid" /> <button onClick={()=>this.setState(prev => ({count: prev.count + 1}))}> increment</button> </div> ); } } ReactDOM.render(<Application />, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"/>componentDidMount because the component hasn't rendered yet.