react: running a method after second time componentWillRecieveProps is called

Question

I have a main ag-grid for my react app. It re-renders when a button is clicked (which provides new data).

I wanted to add a pre-filter that initially filters the data. so I created a new method which creates my prefilter model and then applied it:

initialFilter(){
    ...
    this.state.gridOptions.api.setFilterModel(myView);
    this.state.gridOptions.api.onFilterChanged();
}

I know this works from testing (I called the method on a method used when rows are selected and the filter was applied).

The question was where do I call the method?

Putting it in componentWillRecieveProps causes an infinite loop (i assume due to the two lines of code mentioned above).

I only need to run the method ONCE (every time a button is clicked). After some exploring I noticed if i add a counter in

componentWillRecieveProps(){
...
   if (counter <= 1){
      this.initialFilter();
      counter++;
   }
}

this will work. pre filtering seems to work after the second time componentWillRecieveProps is called. Not sure why but i assume the first time is to render the ag-grid, and then the second time, once the grid is rendered, running my method will work. (if i use the if statement condition 'counter == 0', i wont see my ag-grid be filtered, i assume because something gets overwritten or there is no data to be filtered or something)

this is fine when a button is clicked the second, third, etc time this the method will no longer call

My initial plan was for the button onclick to change a new boolean state variable, and my IF statement logic would be:

'if this state boolean is true then wait until the second time componentWillRecieveProps is called, then run the method and then set the boolean to the opposite value'

Can anyone provide some advice?

Answer 1

I've managed to fix it with a slightly better approach:

In componentsWillRecieveProps I added this:

if (props.preFilter){
    this.initialFilter();
    counter++;
    if (counter == 2){
        props.preFilterWasApplied();
        counter=0;
    }
} 

in my parent component I've set a new state for toggling whether this if statement is called. when clicking the button the state is toggled true. the counter is initially set to 0. initialFilter method is run and get ignored (?) but will let me call componentsWillRecieveProps again. This causes initialFilter to be run again (and not be ignored this time) and the counter to be set to 2. this goes through the second if statement and calls the parent method. the parent method simply toggles the state back to false. The counter is reset back to 0 ready for the next button click.

The state will continue to stay as false, until i click the button again, and it will be set back to false again after the second componentsWillReceiveProps call

If anyone has a more elegant way to do the above, then that would be appreciated :)