Thinking In React Part -2

Hello Fellow Developers We are going to continue our discussion about thinking in react now that we got some hang of it lets take 2 steps at a time;)

Step 2: Build Static Version in React

Now that we have your component hierarchy, it’s time to implement our app. The easiest way is to build  version that takes your data model and renders the UI but has no interactivity. It is  best to decouple these processe because building a static version require a lot of typing and no thinking, and adding interactivity require  lot of thinking and not a lot of typing.

To build  static version of your app that render your data model, you will want to build component that reuse other components and pass data using propsprops are  way of passing data from parent to child. If you are familiar with the concept of statedont use state at all to build this static version. State is reserved only with interactivity, that is data that change over time. Since this is  static version of the app, you do not need it.

You can build any top-down or bottom-up. That is you can either start with building the components higher up in  hierarchy  or with the ones lower in it. In simpler example, it is usually easier to go top-down, and for larger projects, it is easier to go bottom-up and write test as you build.

At end of this step, we will have a library of reusable components that render your data model. The component will only have render() methods since this is  static version of your app. The component at  top of the hierarchy (FilterableProductTable) will take your data model as  prop. If you make  change to your underlying data model and call root.render() again, UI will be updated. You can see how your UI is updated and where to make change. React has  one-way data flow keeps everything modular and fast.

Step 3: Identify The Minimal Representation Of UI’s State

To make our UI interactive, we need to be able to trigger changes to your underlying data model. React achieves with state.

To build our app correctly, we first need to think of the minimal set of mutable state that our app needs.  Figure out the absolute minimal representation of state our application needs and compute everything else we need on-demand. For example, if we are building a TODO list, keep an array of the TODO items around; don’t keep  separate state variable for count. Instead, when we want to render the TODO count, take the length of  TODO items array.

Think of all  pieces of data in our example application. We have:

  • The original list of product
  • The search text user has entered
  • The value of checkbox
  • The filtered list of product

Let’s go through each one and figure out which one state. Ask three question about each piece of data:

  1. Is it passed in from  parent via props?
  2. Does it remains unchanged over time?
  3. Can we compute it based on any other state or props in our component? If so, it isn’t a state.

The original list of product is passed in as props, so that is  not state. The search text and checkbox seem to be state since they change over time and can’t be computed anything. And finally, the filtered list of products isn’t state because it can be computed by combining the original list of product with search text and value of the checkbox.

So finally, our state is:

  • The search text user has entered

The value of checkbox

Thanks for reading and see you guys in the final part of the blog

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories