Prevent Re-rendering, Save Usability

The last hurdle before graduation at Flatiron School is the Capstone. This is a 3 week project that is supposed to encapsulate most of what we learned in the 15 week program, and create something that shows off those skills. Mine is Imp-Politic, a game that creates incentives for people to participate in democracy through legislative advocacy. My original idea was to create a project that facilitates legislative access to underrepresented communities through education. The idea to gamefy advocacy came from thinking about how to make something like calling your senator less of a chore, and more something people want to do.

Challenges

During the build process, I came across multiple challenges, and re-rendering was one of them. When a player completes an action, they click on a button which opens a modal with a congratulatory message and a reward. One of the processes that isn't visible to the player is also adding that reward to the total points the player has already accumulated. The total rewards are held in state in the app. When state is updated, components re-render themselves. Left unchanged, the modal with congratulations and reward would never be shown, and the player would lose all the components they had opened and the app would go back to its original state. This is where preventing re-rendering in certain circumstances comes in.

Finding a solution

Below is a diagram of my app. While most state and lifecycle methods with fetches are held in the Main component, most of the functionality of the app once a user is logged in happens in the children of the LoggedIn Home Page.

I started out having everything in Main, and passing props down to children components that would change Main state. This meant that every time state changed, the entire app would re-render. My first solution was to use a lifecycle method like shouldComponentUpdate to prevent re-rendering.

The React docs for this method are here.

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props.

My method's syntax looked like this:

 shouldComponentUpdate(nextState) {
  if (this.state.loggedInUserPoints !== nextState.loggedInUserPoints) {
    return false;
  }
  return true;
}

However, because everything was being kept in the same component, this method didn't work for me. I started debugging by moving around where certain methods and state were held, to see if having these things in lower order components would help.

As seen in the diagram above, most components share LoggedIn Home Page as the top-most parent, not Main. While the player's total points are calculated and kept in state in the Home Page, the method that updates them is called in Action Card. By moving these methods down into Home Page and lower, I was able to eliminate the need for Main to re-render every time an action is completed.

Conclusion

While there are a few different ways to prevent re-rendering, such as shouldComponentUpdate or Pure Components, it seems that first figuring out the component structure and refining the placement of state and methods is the best way to ensure an app works the way it's supposed to.

Links

Project Github
Imp-Politic