React Declarative Approach

If you are using React then one term you would have heard a lot is that React uses declarative approach not imperative. What does that mean actually?

Declarative and Imperative paradigm

In terms of web programming using imperative programming means you will have to provide steps to manipulate DOM incrementally to reach the desired state.

In declarative approach you describe the desired state, how it reaches that state is abstracted.

So imperative approach is more about writing code which shows how to do what is needed. Whereas declarative approach is more about writing code which shows what is needed.

Declarative programming in React

Don't forget that despite fancy terms like functional components, JSX at the end the code you write in React is translated into JavaScript.

Let's first take an example of creating and adding elements to the DOM using imperative approach in JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

</head>
<body>
<div id="root" >

</div>
<button id="btn" onclick="createEle()">Click</button>
<script>
  function createEle(){
    // Create Section element
    const sec = document.createElement('section');
    sec.id = 'sec';
    // Create h2 element
    const title = document.createElement('h2');
    title.id = 'title';
    title.innerText = 'Imperative approach example';
    // Create p element
    const para = document.createElement('p');
    para.id = 'para';
    para.innerText = 'This paragraph is inserted using CreateElement';
    // adding h2 and p to section
    sec.appendChild(title);
    sec.appendChild(para);
    // adding section to root div
    const root = document.getElementById("root");
    root.appendChild(sec);
    // disable button
    const btn = document.getElementById("btn");
    btn.disabled = true;
  }
</script>
</body>
</html>

As you can see in function createEle() there are explicit steps explaining what needs to be done to create elements and to disable a button.

Same thing when written declaratively in React. In the below code you can observe now you are just stating the final UI that you want (For example stating that the h2 element should be rendered when button is clicked, change the button state once it is clicked). How React renders these elements by adding/modifying the DOM nodes is abstracted from you.

import { useState } from "react";

const Declarative = () =>{
    const [show, setShow] = useState(false);
    return (
        <section>
            {show && <h2 id="title">Declarative approach example</h2>}
            {show && <p id="para">This paragraph is inserted using CreateElement</p>}
            <button id="btn" onClick={() => setShow(!show)} disabled={show}>Click</button>
        </section>
    );
}

export default Declarative;

That's all for this topic React Declarative Approach. If you have any doubt or any suggestions to make please drop a comment. Thanks!

Related Topics

You may also like-

Tech Tutorials

Thursday, December 1, 2022