21 Sep 2021

React is Declarative - What Does it Mean?

It's drilled into you when learning React that it is declarative. But what does declarative actually mean, and what is the opposite of declarative?

Declarative vs Imperative UI

The opposite of declarative is imperative. These are not React-specific terms; they apply to programming in general.

StackOverflow - What is the difference between declarative and imperative paradigm in programming?

In terms of web user interfaces:

• The imperative approach is when you provide step-by-step instructions for how to reach the desired UI
• The declarative approach is when you describe the final state of the desired UI

Example of declarative vs imperative UI

Let's say we need to build this user interface:

Imperative approach

Here's an imperative solution. For every interaction, we provide step-by-step DOM mutations to reach the desired state of the UI. (The example is slowed down to show how each instruction affects the user interface)

Declarative approach

Here's a declarative React solution. Instead of providing step-by-step instructions to reach the desired UI, we describe the final UI we want for each scene.

We can structure the component differently. It doesn't make it less declarative.

What makes it declarative is that we describe the final UI for any given state representation. This is in contrast to providing manual DOM mutations to transition between UI states (imperative).