The other day I built my first React app. It was a thrilling experience as it had been something that I'd been keeping for later assuming it was way too complicated, but the instructor did a stellar job of keeping things simple and fun.

Before we started to get our hands dirty and code, he recommended taking a look at the React website and understanding what the three key highlights of react given on the homepage meant.

They were-

1. Declarative
2. Component-Based
3. Learn Once, Write Anywhere

This article is my "layman's understanding" of what the first item on the list, i.e. Declarative, means. I spent some time looking into the topic so that you hopefully won't have to :)

Declarative vs Imperative

Declarative programming and imperative programming are just two different programming paradigms. i.e. different approaches to programming to get something done.

In imperative programming, we are concerned with how exactly what we want gets done. In declarative programming, we aren't concerned with how things get done. We just want to get the end result.

Let's say you and a friend are going on a road trip from place A to B. In the imperative programming approach, you'd be giving out all the routes, turns, and stops to take to get to point B. In the declarative programming approach, you'd let your friend know where the final destination is and then kick back and relax, while they figure out the route themselves.

Code example

Here is a vanilla JS code that updates a counter value and displays it on the DOM each type a button is clicked. Slide the bar on the left to view the code.

Here's the flow of code:

User clicks on a button -> the counter value is updated -> updated value is displayed on the DOM in multiple places

In Vanilla JS, each step of the process has to be coded manually. We need to set up selectors to let our script know the places where the counter value needs to be updated, and write code that then updates the DOM with the new counter value.

// Selecting elements where the output must be displayed
const counterOutputs = [...document.querySelectorAll(".counter-value")];

// Updating the value to the DOM
function updateDOMCounter(value) {
  counterOutputs.forEach((outputField) => (outputField.innerText = value));
}

This is an example of imperative programming. We are involved with the nitty-gritty of our implementation.

Here's the same example in React

We use a state hook for the counter, which gives a variable counter that has the counter value and a setCounter setter function that can be used to update the counter value.

To update the counter value on the DOM, all we have to do is mention { counter } wherever we need the counter value to be displayed and call setCounter(newValue) within the listeners of the buttons to update the value.

React takes care of updating the counter value and rendering the updated value on the DOM. We don't have to bother with writing explicit code to select the DOM elements and update the counter value.

This is an example of declarative programming. We just tell React that we need the updated value of counter on the DOM wherever it is displayed. React takes care of the rest.

Conclusion

This sums up the basic differentiation between imperative and declarative programming. There is no right or wrong approach here. The imperative approach is relatively a bit tedious, but gives low-level control over implementation, while the declarative approach is quicker and simpler, with a sacrifice on control.

Resources

Here are a few resources that I went through while trying to understand the topic.

1. An amazing, detailed Dev.to article
2. A good read, with multiple metaphors
3. Another simple, fun read
4. Great starter for React