<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Loukya Sri</title>
    <description>The latest articles on DEV Community by Loukya Sri (@loukyasri).</description>
    <link>https://dev.to/loukyasri</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3323142%2F0ba8299b-f30f-4cc9-8508-02cbc936e8ce.png</url>
      <title>DEV Community: Loukya Sri</title>
      <link>https://dev.to/loukyasri</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/loukyasri"/>
    <language>en</language>
    <item>
      <title>Reactayana: The Spiritual Journey of React Rendering</title>
      <dc:creator>Loukya Sri</dc:creator>
      <pubDate>Fri, 04 Jul 2025 17:05:15 +0000</pubDate>
      <link>https://dev.to/loukyasri/reactayana-the-spiritual-journey-of-react-rendering-104g</link>
      <guid>https://dev.to/loukyasri/reactayana-the-spiritual-journey-of-react-rendering-104g</guid>
      <description>&lt;p&gt;&lt;strong&gt;"React doesn't just update the UI. It enacts dharma, audits karma, and manifests moksha through pixels."&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
You, probably, after reading this.&lt;/p&gt;


&lt;h2&gt;
  
  
  setState() &lt;em&gt;The Spark of Desire&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;In the beginning, there was stillness. No motion. No need.&lt;br&gt;
Then came the ripple. A desire. A change in state. A new prop.&lt;/p&gt;

&lt;p&gt;A signal echoed through the void:&lt;br&gt;
"Let there be transformation."&lt;/p&gt;

&lt;p&gt;React doesn't wake the whole world. Only those touched by change are called to rise.&lt;/p&gt;

&lt;p&gt;No chaos. No blind re-rendering.&lt;br&gt;
Selective awakening. Conscious re-evaluation.&lt;br&gt;
Change begins within, not without.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;App&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useState&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;setCount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nx"&gt;Clicked&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;times&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  React Elements &lt;em&gt;The Divine Blueprint (Sankalpa)&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;The component function re-runs. Not to act. To declare.&lt;br&gt;
"What should reality look like now?"&lt;br&gt;
It returns a fresh set of React elements.&lt;/p&gt;

&lt;p&gt;Not the real DOM. Not yet.&lt;br&gt;
This is vision, not existence. Intention, not manifestation.&lt;br&gt;
This is &lt;em&gt;sankalpa&lt;/em&gt;. The will behind the world.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;counter&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;You&lt;/span&gt; &lt;span class="nx"&gt;clicked&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;times&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;handleClick&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Click&lt;/span&gt; &lt;span class="nx"&gt;Me&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Current Fiber Tree &lt;em&gt;Memory of Past Lives (Smriti)&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;React remembers. Not sentimentally. Structurally.&lt;br&gt;
The Fiber Tree holds the echoes of what came before.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Which components existed&lt;/li&gt;
&lt;li&gt;What state they carried&lt;/li&gt;
&lt;li&gt;Their effects&lt;/li&gt;
&lt;li&gt;Their parent-child lineage&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is memory, not judgment. Karma's ledger, not heaven’s book.&lt;br&gt;
The old self watches the new vision. Quiet. Aware.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;tag&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;FunctionComponent&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;stateNode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;memoizedState&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="nx"&gt;child&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="nx"&gt;sibling&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Reconciliation &amp;amp; Diffing &lt;em&gt;The Karma Audit (Viveka)&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;Now comes Balance. Not emotional. Logical.&lt;br&gt;
"What has truly changed?"&lt;/p&gt;

&lt;p&gt;React compares the new vision with the old memory.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Are these still the same components?&lt;/li&gt;
&lt;li&gt;Do their keys match?&lt;/li&gt;
&lt;li&gt;Has their order shifted?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If identity remains, React updates.&lt;br&gt;
If it breaks, React unmounts and recreates.&lt;br&gt;
No mercy, but no cruelty either. Just clarity.&lt;/p&gt;

&lt;p&gt;List keys? They're not optional. They're your &lt;em&gt;ātmā’s&lt;/em&gt; tag.&lt;br&gt;
Lose it, and React loses you. You're reborn as a stranger.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;ListItem&lt;/span&gt; &lt;span class="nx"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="p"&gt;))}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Updated Fiber Tree &lt;em&gt;The New Self (Punarjanma)&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;From discernment comes rebirth. A new Fiber Tree.&lt;br&gt;
Not a clone. Not a reset. A continuation, aware of its past.&lt;/p&gt;

&lt;p&gt;It holds:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;New props&lt;/li&gt;
&lt;li&gt;Updated state&lt;/li&gt;
&lt;li&gt;Preserved effects&lt;/li&gt;
&lt;li&gt;A link to its prior incarnation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is reincarnation, not replacement. Memory guides rebirth.&lt;br&gt;
It is different. But it remembers.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;tag&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;FunctionComponent&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;memoizedProps&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="nx"&gt;memoizedState&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="nx"&gt;alternate&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;previousFiber&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Karma Phala &lt;em&gt;Instructions for Manifestation&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;Before touching the DOM, React drafts instructions.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Insert this element&lt;/li&gt;
&lt;li&gt;Remove that node&lt;/li&gt;
&lt;li&gt;Update this attribute&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is &lt;em&gt;karma phala&lt;/em&gt;. The result of the intention.&lt;br&gt;
Calculated. Precise. Deserved.&lt;br&gt;
Not action yet. But inevitable.&lt;/p&gt;

&lt;p&gt;This isn’t a repaint. This is Shiva’s dance.&lt;br&gt;
Destruction only where necessary. Creation only where needed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;UPDATE&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;domNode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;existingNode&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="nx"&gt;newProps&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nl"&gt;className&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;updated&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Commit Phase &lt;em&gt;Prārabdha Karma (Action Unleashed)&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;Render was pure. Thought without touch.&lt;br&gt;
Commit is manifestation. Side-effects run. DOM is mutated.&lt;/p&gt;

&lt;p&gt;This is &lt;em&gt;prārabdha karma&lt;/em&gt;. The fruit that must now ripen.&lt;br&gt;
There’s no turning back. The blueprint has passed the threshold.&lt;br&gt;
Now it becomes the world.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`Clicked &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; times`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Updated UI &lt;em&gt;Moksha or the Mirror of Truth&lt;/em&gt;
&lt;/h2&gt;

&lt;p&gt;Finally, the UI reflects the state.&lt;br&gt;
No illusions. No lag. No outdated impressions.&lt;br&gt;
What you see is what truly is.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Moksha.&lt;/em&gt; Liberation from the old. Manifestation of the true.&lt;/p&gt;

&lt;p&gt;But silence never lasts.&lt;br&gt;
Desire arises again. &lt;code&gt;setState()&lt;/code&gt; whispers.&lt;br&gt;
It Spirals.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Reactayana Philosophy
&lt;/h2&gt;

&lt;p&gt;React doesn’t repaint. It rebirths.&lt;br&gt;
Every re-render is a conscious decision.&lt;br&gt;
Not to destroy, but to evolve.&lt;br&gt;
Not to erase, but to remember and rebuild.&lt;/p&gt;

&lt;p&gt;React Elements are intention.&lt;br&gt;
Fiber Tree is memory.&lt;br&gt;
Diffing is discernment.&lt;br&gt;
Mutation is &lt;em&gt;karma phala&lt;/em&gt;.&lt;br&gt;
Commit is destiny.&lt;br&gt;
The UI is &lt;em&gt;moksha&lt;/em&gt; — until the cycle begins again.&lt;/p&gt;

&lt;p&gt;React is not reactive. React is reflective.&lt;br&gt;
React doesn’t just render.&lt;br&gt;
&lt;strong&gt;React reincarnates.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>frontend</category>
      <category>javascript</category>
      <category>learning</category>
    </item>
  </channel>
</rss>
