Stop Re-rendering a particular View in react native

Question

How to stop, a particular view from re rendering when there is an state change ? I am using a Timer countdown component from react-native-timer-countdown . What happens is after expiry, i am setting an new state. So when there is an new state, it rerenders. So the timer starts from beginning.

The library itself suggest to use two separate component. But, i dont feel thats a good. Is there any way to stop the timer to restart once done ( even at state change ) ?

My Code :

<View>
    <TimerCountdown
      initialMilliseconds={100 * 60}
      onTick={(milliseconds) => console.log("tick", milliseconds)}
      onExpire={() => this.setState({ disabled: false })}
    />
</View>

OnExpire , there is an setstate which restarts the timer again. Please suggest

Answer 1

Not sure what are you trying to achieve. I think you can a couple of options:

• use two components (I think it is a good idea)
• make them use PureComponent for TimerCountdown (or implement shouldComponentUpdate )
• write this countdown by yourself (I think you will find a way how to make it when you write it completely by yourself)

Answer 2

I had this problem with this package too.

I solved it by removing it and writing my own component.

refer to this answer of mine, I explained my work.

timer count down re-rendering and leaking problem

It's working fine for me ,I hope it help you and solve your problem too.

Answer 3

A good practice in React Native is to have a parent component, which is called sometimes Smart Component usually class-based component,

It's job is to ed - to fetch data and make any logical decisions. - render child components accordingly.

these child components some people call it Dumb Component , usually a presentational component or a funtional component, it's job from it's name to render some content only a change to ony of it's props received

So I suggest you encapsulate the JSX that you don't want to be affected by the change in your state in a functional component. That way it will not be rendered if the change in state has not been passed as a prop to it.

in the code below, if field2 in state has changed, PresentationalComponent will not rerendered

class ParentComponent {
  render() {
    const { field1, field2 } = this.state;
    return (
      <View>
        ...
        <PresentationalComponent prop1={field1} />
        ...
      </View>
    );
  }
}