The philosophy of React: Declarative rendering

A core concept behind React is the idea of declarative rendering vs. imperative rendering.

Vanilla JS and libraries like jQuery are imperative. For example, when you want to change the class attribute of a DOM element, you directly command the element to change its class by calling a function like ‍

.classList.add()

or

 .addClass()

‍

. (Trivia: impero means “to command” in Latin)

‍

function A     function B      function C
    |              |               |
    |__________.   |   .___________|
               |   |   |
               v   v   v
             state + props
                   |
                   |
                   v
              DOM element

‍

The advantage of declarative rendering over imperative rendering becomes clear when you have many different elements whose attributes depend on several different pieces of data (the header of a webapp is a common place to find elements like this).

With imperative DOM manipulation, you would have to send a command to every element whenever any one of those pieces of data changes. The functions that send those commands could be spread out throughout your code. Those functions must also take into account the other functions that also affect it. The logic controlling a particular element’s attributes is fragmented and distributed, making it very difficult to track down bugs.

‍

With declarative DOM manipulation, a single element would have all its attributes defined in a single spot within your

render()

function. The functions that affect the state and props that those attributes are derived from would still be spread throughout your code; however, those functions no longer need to take into account the other functions that also affect those state and props. All of the logic controlling a particular element’s attributes is concentrated in the single spot in

render()

where you derive those attributes from state and props, making it very simple to track down bugs.

In imperative rendering, many different functions push information down to an element. In declarative rendering, an element pulls information down from only state and props.

The concept of declarative rendering has a counterpart in the world of writing and sentence composition. In many style guides, it’s a common instruction to keep related words together; adjectives that modify a noun should be in proximity to that noun. React and its policy of deriving element attributes from state and props offers us a simple way to follow this rule in front-end development.

Happy hacking!

‍

‍