Difference between declarative and imperative in React.js?

A declarative style, like what react has, allows you to control flow and state in your application by saying “It should look like this”. An imperative style turns that around and allows you to control your application by saying “This is what you should do”.

The benefit of declarative is that you don’t get bogged down in the implementation details of representing the state. You’re delegating the organizational component of keeping your application views consistent so you just have to worry about state.

Imagine you have a butler, who is kind of a metaphor for a framework. And you would like to make dinner. In an imperative world, you would tell them step by step how to make dinner. You have to provide these instructions:

Go to the kitchen
Open fridge
Remove chicken from fridge
...
Bring food to the table

In a declarative world, you would simply describe what you want

I want dinner with chicken.

If your butler doesn’t know how to make chicken, then you cannot operate in a declarative style. Just like if Backbone doesn’t know how to mutate itself to do a certain task, you can’t just tell it to do that task. React is able to be declarative because it “knows how to make chicken”, for example. Compared to Backbone, which only knows how to interface with the kitchen.

Being able to describe the state reduces the surface area for bugs dramatically, which is a benefit. On the other hand, you might have less flexibility in how things occur because you’re delegating or abstracting away how you implement the state.

Leave a Comment