React JS, How to only allow component to update once per second

Question

I am having trouble limiting how often a component gets updated. Component A has a parent Component B.

I want to have Component A only update once per second, as we are using socket IO to update live results, but when there are 100's of users we get too many updates and the page renders way more than we'd like giving us a glitchy look as a bar graph goes up and down very quickly.

Is there a way to ONLY allow Component A to update once per second? Do we have to control how often Component B passes down props to Component A?

Answer 1

What you're looking is for throttling , which would allow a function to run at most once per second per your requirement.

Where should I throttle?

The principle is to throttle whatever that will trigger a mutation on those states in the container component (the component that hosts the states that become props to the presentation component), not to throttle the rendering itself.

If I throttle in the presentation component, now all the views I desire to be throttled need to change into "throttled components", and these can no longer be pure functional presentation components.

Reusable components for presentation don't need to, or even must not know about throttling. The containers that use them decide on throttling and other behavior. Throttling is only required because of the real time feed, so it should live where the feed is processed by the container, and be limited there without impacting the structure of the rest of the app.

By following this principle, throttling can be disabled or modified from a single place. And there will be no unnecessary state mutations in the container that will end up being throttled by the "throttled components" anyway.

Less important implementation details

You can implement it yourself, or use a library like Lodash that implements throttling (among other things).

You can use throttle to throttle the state updates that would trigger a render on Component A

_.throttle(func, [wait=0], [options={}])

Creates a throttled function that only invokes func at most once per every wait milliseconds.

So for you func would be the function that would trigger a state update, and wait would be 1000. (1000 ms is 1 second)

Answer 2

You can use shouldComponentUpdate and store the last update time in a variable then comparing now with the last updated time.

class MyComponent extends Component {
    constructor() {
        this.lastUpdateDate = new Date();
    }

    shouldComponentUpdate() {   
        const now = new Date();  
        var seconds = (now.getTime() - this.lastUpdateDate.getTime()) / 1000;   
        return seconds >= 1;   
    }

    componentDidUpdate() {     
        this.lastUpdateDate = new Date();  
    } 

    render() {
        return <span>My Component</span>;
    }
}