Scribd
Upload
14 views

State Propagation in REACT - Js Using UseState Hook

Uploaded by

katarichallenge
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

State Propagation in REACT - Js Using UseState Hook

Uploaded by

katarichallenge
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

STATE PROPAGATION

In REACT.JS
Using useState() Hook
Abdulrazak Attar
Author SDE @
INDEX
1. What is State Propagation
2. Why React.js came into Picture
3. UI update when State changes in classic JavaScript
4. UI update when State changes in React.js
5. Summary

Embrace the bugs, they make you stronger


1. What is State Propagation

In simple words, State is nothing but a Variable.

Lets say in UI we have used this variable in 10 places.


And when this variable(state) changes we need to
update the UI as well. This is know as State
Propagation.

Stay curious, keep coding


2. Why React.js came into Picture
In classic javaScript, if we want to update the UI when
State changes, we needed to reload the entire page.
Means the entire DOM will be re-structured,
leading to complex code and poor performance.

Such one issue Facebook was facing. They were not


able to update features like real-time notifications and
reactions efficiently within their PHP-based stack.
Every small change required reloading the entire page
(DOM re-structure), resulting in sluggish performance
and frustrating user experiences.

To resolve this issue, one engineer of Facebook,


named Jordan Walke, developed a library called
React.js.

Dream big, code even bigger


This approach allowed developers to manage State at
the component level and efficiently propagate changes
to the UI without the need to reload the entire DOM,
by using virtual DOM of React.

And that's how it is came in existence...!

Lets discuss this with simple example in next 2 topics..!

Success is just a compile away


3. UI Update when State changes in classic JavaScript

In classic JavaScript, updating the UI when State


changes typically involves directly manipulating the
DOM using methods like getElementById or
querySelector, and then updating the relevant elements
with new data.

This approach can quickly become messy and error-


prone, especially as the application grows in
complexity.

Lets take one example here. Imagine, we have a variable


(State) and 5 elements (took 5 div’s just for example) in UI
which uses this State. Now imagine on click of a button we
need to update/change the State and this update needs to
reflect at all 5 places. (continue in next slide)

In the world of coding, persistence is key


What we need to do? It is simple, we will access all 5
elements by getElementById or querySelector. Then we
will add an eventLIstener to the buttun and on click we
will call a function which will update the State and also
will propagate the changes to all 5 elements manually.

The code for this scenario is in next slide:

Refactor with courage, ship with confidence


<body>

<div id="displayArea1"></div>
<div id="displayArea2"></div>
<div id="displayArea3"></div>
<div id="displayArea4"></div>
<div id="displayArea5"></div>

<button>Update Variable</button>

</body>

<script>

let variableValue = "default value";

let element1 = document.getElementById("displayArea1");


let element2 = document.getElementById("displayArea2");
let element3 = document.getElementById("displayArea3");
let element4 = document.getElementById("displayArea4");
let element5 = document.getElementById("displayArea5");
let btn = document.querySelector("button");
t slide
n nex
es i
window.onload = function () { nu
conti
element1.innerText = variableValue;
code
element2.innerText = variableValue; msy
element3.innerText = variableValue;
//clu
element4.innerText = variableValue;
element5.innerText = variableValue;
};

Bugs are just features waiting to be discovered


let updateUI = () => {
element1.innerText = variableValue;
element2.innerText = variableValue;
element3.innerText = variableValue;
element4.innerText = variableValue;
element5.innerText = variableValue;
}

btn.addEventListener("click", () => {
variableValue = 'updated value'
updateUI();
});

</script>

Soo, as we can see here, the code has became clumsy. Even though we don’t
access and store the elements in variables (as I did above element1,2,etc) and
access them directly in functions itself, then also it is tedious and for more
complex apps, it will become even more clumsy.

So here, in short, to UPDATE the UI based on State, we need to write more code
manually.

BUT, this UPDATE thing we can do it very easily by REACT. In fact we no need to
update the UI, React itself will do it for us. Lets see the same scenario with React
now....!

Perfection is the enemy of progress, keep shipping


4. UI Update when State changes in React.js

Look at the below code:


import React, { useState } from "react";

function App() {
let [defaultValue, setDefaultValue] = useState("default value");

let updateUI = () => {


setDefaultValue((defaultValue = "updated value"));
};

return (
<>
<div>{defaultValue}</div> need
<div>{defaultValue}</div> ly we
c h on
<div>{defaultValue}</div>
is mu
<div>{defaultValue}</div> it. Th ite
t’s wr
<div>{defaultValue}</div> h, tha to
a
//Ye
<button onClick={updateUI}>Update UI</button>
</>
);
}

export default App;

Don't fear the unknown, embrace it with code


And here we are not responsible to UPDATE the UI.
We will update the State and REACT will UPDATE the
UI for us...!!

REACT WILL REACT WHEN STATE CHANGES

Here, we have a component (App) in which REACT hook useState which


provides us a variable (defaultValue) to store the initial value (‘default
value’) and a method (setDefaultValue) to update the variable(State).

In same component we have 5 elements and a button which onclick is


calling updateUI function which internaly calling setDefaultVlaue method
which is responsible to update the State here. And whenever State
Update/changes, REACT will automatically Updates the UI.

Stay focused, stay coding, stay awesome


5. Summary
So the Summary is as follows:

1. State propagation is a fundamental concept in React.js, enabling


efficient communication and data updates between components.

2. React.js was introduced to address the challenges of managing


complex user interfaces in traditional JavaScript applications, such as
inefficient DOM updates.

3. In React.js, the state is managed at the component level using the


useState() hook (hooks - only in functional components), and state
propagation allows components to share state and update the UI
accordingly.

4. By leveraging state propagation and the virtual DOM, React.js makes


it easier to build scalable and responsive user interfaces.

Code is the poetry of a logical mind


Hi, my name is Razak, if you
liked this post, then FOLLOW
me for more
ya!
See

You might also like