Argthtjtr

I want to set setInterval inside an onChange event, like mostly it is done on componentDidMount.

I have 2 dropdowns that filter data and then render a table, the dropdowns are controlled by onChange methods. The last on change method has a request that needs to be re-polled every X # seconds to get updated information from the server. However, these methods are outside of cDM so I'm not sure how to handle the setInterval like I previously have.

cDM() {

    //axios call, update state with fetched data

}



onChange1 () {

    // uses data from cDM to render the options in a dropdown.

    // another axios call based on the selection, fetches data to render more options in subsequent dropdown

}



onChange2 () {

    //dropdown 2 use data from onChange1 axios call. After the selection from the dropdown is made, it makes an api call that then renders data to a table. 

    //Some of this data updates every 5 seconds, so I need to re-poll this service to get updated information from the server.

}

if all the data was in cDM I'd normally change the data requests in cDM to an arrow function to avoid setState issues, call the function inside/outside of the setInterval callback with the following:

componentDidMount() {

this.interval = setInterval(() => this.getData(), 10000);

this.getData();

}



componentWillUnMount() {

clearInterval(this.interval);

}



getData = () => {

//data requests

}

SetInterval does not wait for the AJAX response before polling starts over again. This can become extremely buggy/memory intensive in the event of network problems.

I would suggest you use a setTimeOut and every update I would put a piece of response data in state and start the timer upon state changes inside your render function. That way you always ensure you get your result back before pounding the server again and bogging down your client's UI.

• Place the code of componentDidMount body into both onChange events.


• 
  

  Set Interval equal to some state variable, so on componentWillUnmount you can access that interval and remove it.

  
  
  

  onChange () {    
  
      // Change Logic
  
      ....
  
  
  
      // Interval logic
  
      clearInterval(this.state.interval); //Clear interval everytime.
  
  
  
      this.state.interval = setInterval(() => this.getData(), 10000);
  
      this.getData();
  
  }
  
  
  
  componentWillUnMount() {
  
      clearInterval(this.state.interval);
  
  }
  
  

  
  

You can indeed place this in your update event handler - event handlers do not have to be pure. There is the minor issue that doing this means that your view is no longer a function of state + props, but in reality that's not usually a problem.

It seems your main concern is how you model this data.

One way to do this might be to use a higher order component or some kind of composition, splitting the display of your component from the implementation of the business logic.

interface Props<T> {

  intervalMilliseconds: number

  render: React.ComponentType<ChildProps<T>>

}



interface State<T> {

  // In this example I assume your select option will be some kind of string id, but you may wish to change this.

  option: string | undefined

  isFetching: boolean

  data: T

}



interface ChildProps<T> extends State<T> {

  setOption(option: string | undefined): void

}



class WithPolledData<T> extends React.Component<Props<T>, State<T>> {

  interval: number



  componentDidMount() {

    this.setupSubscription()

  }



  componentDidUnmount() {

    this.teardownSubscription()

  }



  setupSubscription() {

    this.interval = setInterval(() => this.fetch(), this.props.intervalMilliseconds)

  }



  teardownSubscription() {

    clearInterval(this.interval)

  }



  componentDidUpdate(previousProps: Props, previousState: State) {

    if (previousProps.intervalMilliseconds !== this.props.intervalMilliseconds) {

      this.teardownSubscription()      

    }

    if (previousState.option !== this.state.option && this.state.option !== undefined) {

      this.fetch()

    }

  }



  fetch() {

    if (this.props.option === undefined) {

      // There is nothing to fetch

      return

    }



    // TODO: Fetch the data from the server here with this.props.option as the id

  }



  setOption = (option: string | undefined) => {

    this.setState({ option })

  }



  render() {

    return React.createElement(

      this.props.render,

      {

        ...this.state,

        setOption: this.setOption

      }

    )

  }

}

You could use this component like so:

<WithPolledData intervalMilliseconds={5000} render={YourComponent} />

YourComponent would call setOption() whenever a drop down option was selected and the fetching would happen in the background.

This is how you would technically do this. I agree with @ChrisHawkes that using setInterval like this is likely a mistake - You would at the very least need to cancel in-flight HTTP requests and you run the risk of causing issues on devices with poor network performance.

Alternatively, a push rather than a pull model may be better here - This scenario is exactly what WebSockets are designed for and it wouldn't require too much modification to your code.