Declarative Programming in React
Tags: react, javascript, webdev, functional
Published: 2021-08-26 17:41:30

When you go to [React.js front page](https://reactjs.org) 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:
```jsx
function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}
```
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:
```css
.trendy { color: red; }
.fancy { color: blue; }
```
can be translated to pseudocode:
```txt
when element class is `trendy` its text color should be red
when element class is `fancy` its text color should be blue
```
React expects similar declarative description from you:
```jsx
//       declarative view description
//                   ↓
ReactDOM.render(<div>Hi</div>, rootEl);
```
The format of the view description that React uses is commonly known as VDOM and looks like this: 
```json
{
  type: "div",
  props: {
    children: "Hi"
  }
}
```
That's what JSX evaluates to.

The previous code snippet can be expressed in pseudocode  as:
```pseudocode
the view should be <div>Hi</div>
```
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:

```txt
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>
...
```

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:
```txt
when component state is `n` then the view should be <div>{n}</div>
```
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:
```css
div:nth-child(1) { color: gray; }
div:nth-child(3) { color: gray; }
div:nth-child(5) { color: gray; }
...
```
You can write:
```css
div:nth-child(2n - 1) { color: gray; }
/* or even better */
div:nth-child(odd) { color: gray; }
```

Is there something similar in React? Well, yes - a component:
```jsx
function Component({ n }) {
  return <div>{ n }</div>
}
```
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.