React: Flow and Lifecycle

What is React?

React is a JavaScript library for building user interfaces. It says it right here on the website.

That said, library may be a bit misleading. It may be better to consider React as a full framework, a framework insistent upon ease of operation and fluidity. Created and maintained by Facebook, React is a wonderful tool for quick and interactive pages. It really is hard to imagine modern social media without all the real-time bells and whistles that are made so comfortable and easy by React.

At its core, React is Component and State based, and this is what allows for the ease of re-rendering based on an ever-updating code.

Components

“Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.” (reactjs.org). On the dev-side, components are similar to functions. They accept an input (“props” is the React terminology) and return the desired elements that should appear on the screen.

User-side these look like all the little nuanced portions and strata your website hinges on: search results, photo albums, message board/ live feed, etc.

A component must take in a render method. While all other methods are optional, Render() is what instructs how the application should respond given a specific situation.

State

Full transparency, this is going to be an oversimplification: I picture React State as an on/off switch. Hear me out.

The developer sets a given state for their component. The state is where you store the current value for that component (again, think function). When the state object is changed, the website re-renders based on its given instruction.

Imagine the light switch in your bedroom as a component. If the state is off, the lights are flipped to “Off” and darkness abounds. Once you change the state of that light switch to “On” the lights beam, electricity surges, and the room is no longer dark. Voilà: you have re-rendered your bedroom.

Lifecycle

Within components there are methods that allow you to dictate our program’s flow and time of process. One sort of inevitable example that is readily available on the world wide web is the ticking clock.

On one hand, a developer can create a ticking clock through the Date() constructor and then use a setInterval() method to update the time displayed every 1000 milliseconds. The problem is this implementation of our clock updates the UI each second, rather than the actual clock. As you can imagine, this is a bog.

With React, we’re able to change our clock over from a function into a totally separate class. This is going to allow us to render Clock into the Dom, where the Clock will only be rendered instead of the entire UI.

Conclusion

React is a useful and popular resource for controlling and mitigating clog. This is particularly useful in web applications with high user-input and data. By utilizing the lifecycle of components, the developer is able to set an order to the website’s operation. When x happens, y is the result.

For a deeper dive into the popular library, I definitely recommend looking over their informative website and starting with this diagram.