Component Optimization

Component Optimization

Breaking a program into smaller modules.

I do believe most of the computer science students heard the quote above. This post is talk about component optimization in React/React Native.

Introduction

One may ask, since we can done all job in one component, why do we need to break it into several components ? 

For: 

  • Better maintainability 😁
  • Reusable (although it is seldom being achieved) 🤔
  • Performance 😍

In this post I will demonstrate a simple clock that update every second. 

type Props = {};

type State = {
  timer: string
};
export default class Clock extends Component<Props, State> {
  countDownIntervalID: any; // To store the value return setInterval

  ONE_SECOND: number = 1000; // 1000 milliseconds
  BUTTON_TEXT_STOP: string = "Stop";
  BUTTON_TEXT_START: string = "Start";
  TIME_FORMAT: string = "hh:mm:ss";

  constructor(props: any) {
    super(props);

    this.state = {
      timer: moment().format(this.TIME_FORMAT)
    };
  }
}

Initial state of this screen. Currently, this is how I manage those values in my component. Declare as global variables to the class. For reuse purpose, if one never been use in another place, it is better declare as local variable.

#1 – Utilize React component lifecycle

shouldComponentUpdate(nextProps: any, nextState: any) {
  return this.state.timer !== nextState.timer;
}

componentDidMount() {
  this.countDownIntervalID = setInterval(this._countDown, this.ONE_SECOND);
}

componentWillUnmount() {
  clearInterval(this.countDownIntervalID);
}

shouldComponentUpdate , componentDidMount , componentWillUnmount are React component lifecycle. 

#2 – Functions

// Update state.timer
_countDown = () => {
  this.setState({
    timer: moment().format(this.TIME_FORMAT)
  });
};

// Stop the interval
_onPressStopHandle = () => {
  clearInterval(this.countDownIntervalID);
};

// Start/Restart the interval
_onPressStartHandle = () => {
  this.countDownIntervalID = setInterval(this._countDown, this.ONE_SECOND);
};

#3 – Render

render() {
  return (
    <View style={style.timerContainer}>
      <Text style={style.timerText}>{this.state.timer}</Text>
      <View style={style.buttonContainer}>
        <Button onPress={this._onPressStartHandle} rounded success>
          <Text>{this.BUTTON_TEXT_START}</Text>
        </Button>

        <Button onPress={this._onPressStopHandle} rounded danger>
          <Text>{this.BUTTON_TEXT_STOP}</Text>
        </Button>
      </View>
    </View>
  );
}

Here is the render() function that rendering the view. 

So, what if this screen growth larger ?

There is possible that you want to add other stuff into this screen – some texts, buttons or features. And those are needed but not necessary to re-render the view every second. It is a waste of resources. 

So, break the timer into a standalone component.

  • To minimize the re-rendering action
  • Reusable component
  • Plug and play with other components.

Just some simple sharing and thanks for reading. 😊