DEV Community

Marc Ziel
Marc Ziel

Posted on

Declarative Programming in React

When you go to React.js front page you can read that:

Declarative.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Then you look at some example:

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}
Enter fullscreen mode Exit fullscreen mode

and start to wonder how this code can be considered declarative? Is there any truth in the description? Let's find out.

Every app has state and logic. Logic can be expressed in declarative or imperative style.

People have different opinions about CSS language but everybody agrees that it's declarative, so we'll begin with CSS code and compare it to React code to see if there are any similarities.

This CSS code:

.trendy { color: red; }
.fancy { color: blue; }
Enter fullscreen mode Exit fullscreen mode

can be translated to pseudocode:

when element class is `trendy` its text color should be red
when element class is `fancy` its text color should be blue
Enter fullscreen mode Exit fullscreen mode

React expects similar declarative description from you:

//       declarative view description
//                   ↓
ReactDOM.render(<div>Hi</div>, rootEl);
Enter fullscreen mode Exit fullscreen mode

The format of the view description that React uses is commonly known as VDOM and looks like this:

{
  type: "div",
  props: {
    children: "Hi"
  }
}
Enter fullscreen mode Exit fullscreen mode

That's what JSX evaluates to.

The previous code snippet can be expressed in pseudocode as:

the view should be <div>Hi</div>
Enter fullscreen mode Exit fullscreen mode

But this isn't really useful. We don't want our view to be static, that's why we chose React instead of just writing HTML code. We want something like:

when app state is `1` then the view should be <div>1</div>
when app state is `2` then the view should be <div>2</div>
...
Enter fullscreen mode Exit fullscreen mode

Okay, the code it declarative but it isn't manageable (writing a clause for every possible number? No, thank you).

Can we do better? How about this code:

when component state is `n` then the view should be <div>{n}</div>
Enter fullscreen mode Exit fullscreen mode

With just a single line of pseudocode we have all the numbers covered. This code is still declarative - it's equivalent to the previous pseudocode but a lot more succinct.

In CSS you can encounter special kind of declarations that are applied based on some data, like the position of an element.

Let's say you want every alternate div to have gray text, instead of writing:

div:nth-child(1) { color: gray; }
div:nth-child(3) { color: gray; }
div:nth-child(5) { color: gray; }
...
Enter fullscreen mode Exit fullscreen mode

You can write:

div:nth-child(2n - 1) { color: gray; }
/* or even better */
div:nth-child(odd) { color: gray; }
Enter fullscreen mode Exit fullscreen mode

Is there something similar in React? Well, yes - a component:

function Component({ n }) {
  return <div>{ n }</div>
}
Enter fullscreen mode Exit fullscreen mode

It's a declarative function that describes the relation between the state and the view. So indeed, this is a declarative code. Whenever React needs to know how the current view should look like it fires up Component.

There you have it: React components are just like sophisticated CSS declarations and when you write in React, you're writing declarative code.

Discussion (0)