Re call api when property in SPFX property pane is changed

This is possibly a really stupid question but here goes.

I've got a dropdown field in my Property pane that is populated with all lists from the current site. This is working no problem.

When I change the drop down I populate a property with the ID of the list. Within my react component I call the below

public componentDidMount(){
     var url = this.props.webUrl + "/_api/web/lists(guid'"+ this.props.listId+"')/items";
     console.log("LIST API = " + url);
     var getListInfo: FetchListData = new FetchListData();
      getListInfo.getItems(url, this.props.client).then((data) => {

         this.setState({ navItems: data });
      })
  }`

My assumption is that when the web part initially loads the component is rendered on to the page but if I update the Property it's not then recalling this componentDidMount because technically it's already mounted.

What I would like to do is get the component to re-render once I change the list(the dropdown property) . What I currently have will work because once you save the page it will render out all the retrieved items. I'm just assuming there would be a way to make it dynamic.

My experience with react is basic to say the least so any direction would be perfect.

Cheers

Truez

Figured this one out after looking in to the React page cycle.

componentDidUpdate(prevProps, prevState) {
  //If statement checking if your property or state has changed.
  //Re run API call 
}

Cheers

Truez