<?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>Forem: Arjun R Pillai </title>
    <description>The latest articles on Forem by Arjun R Pillai  (@arjun_dev).</description>
    <link>https://forem.com/arjun_dev</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%2F3409977%2Fa9810347-e986-4a2d-9b9b-8614f6eb7b56.jpg</url>
      <title>Forem: Arjun R Pillai </title>
      <link>https://forem.com/arjun_dev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/arjun_dev"/>
    <language>en</language>
    <item>
      <title>Why My Child Component Didn’t Re-render? — The Secret Behind React Children and Elements</title>
      <dc:creator>Arjun R Pillai </dc:creator>
      <pubDate>Tue, 12 Aug 2025 15:35:52 +0000</pubDate>
      <link>https://forem.com/arjun_dev/why-my-child-component-didnt-re-render-the-secret-behind-react-children-and-elements-17mp</link>
      <guid>https://forem.com/arjun_dev/why-my-child-component-didnt-re-render-the-secret-behind-react-children-and-elements-17mp</guid>
      <description>&lt;p&gt;In &lt;a href="https://dev.to/arjun_dev/react-developers-you-dont-always-need-memo-4fmp"&gt;Part 1&lt;/a&gt;, we saw something curious:&lt;/p&gt;

&lt;p&gt;A component passed as children to a &lt;code&gt;&amp;lt;MovingCcomponent/&amp;gt;&lt;/code&gt; didn’t re-render, even though the &lt;code&gt;&amp;lt;MovingCcomponent/&amp;gt;&lt;/code&gt; itself was re-rendering.&lt;/p&gt;

&lt;p&gt;At first, this feels wrong. Isn’t React’s rule that when a parent renders, the child also renders? Let’s break it down.&lt;/p&gt;

&lt;p&gt;Let’s dig deeper into what’s really happening by first understanding what &lt;strong&gt;React children&lt;/strong&gt; actually are and what &lt;strong&gt;React Elements&lt;/strong&gt; mean.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Exactly Is React children?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;children in React is just a prop.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When you write:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const Parent = ({ children }) =&amp;gt; {
  return &amp;lt;&amp;gt;{children}&amp;lt;/&amp;gt;;
};
&amp;lt;Parent&amp;gt;
  &amp;lt;Child /&amp;gt; // 👈 This is the child
&amp;lt;/Parent&amp;gt;;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;&lt;strong&gt;This is simply syntax sugar for:&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Parent 
 children={&amp;lt;Child name="Arjun" /&amp;gt;} // 👈 children passed as a prop
 /&amp;gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  What Exactly Is a React Element?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;A component like:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;Child name="Arjun" /&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;em&gt;is syntax sugar for:&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;React.createElement(Child, { name: "Arjun" });
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;React.createElement returns a &lt;strong&gt;plain JavaScript object (a React element)&lt;/strong&gt;:&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  type: Child,
  props: { name: "Arjun" },
  key: null,
  ref: null
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;React elements are immutable objects — the &lt;strong&gt;only way to “update” them is to create a new object&lt;/strong&gt;. That is actually happening while re-rendering.&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  During Re-renders
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;When a parent component re-renders:&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const Parent = () =&amp;gt; {
  return (
    &amp;lt;div&amp;gt;
      &amp;lt;Child /&amp;gt;
    &amp;lt;/div&amp;gt;
  );
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;The &lt;code&gt;&amp;lt;Child /&amp;gt;&lt;/code&gt; element is recreated from scratch each time&lt;/strong&gt;, because JSX is evaluated again, returning a brand-new object.&lt;/p&gt;

&lt;p&gt;This is why, normally, children will re-render when their parent re-renders — the element reference changes.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Mystery: Why Didn’t My HeavyChild Re-render?
&lt;/h2&gt;

&lt;p&gt;Consider this example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const MovingComponent = ({ children }) =&amp;gt; {
  const [state, setState] = useState();

  return (
    &amp;lt;div style={{ left: state?.x, top: state?.y }}&amp;gt;
      {/* These won't re-render because of the state change */}
      {children}
    &amp;lt;/div&amp;gt;
  );
};

const OuterComponent = () =&amp;gt; {
  return (
    &amp;lt;MovingComponent&amp;gt;
      &amp;lt;HeavyChild /&amp;gt;
    &amp;lt;/MovingComponent&amp;gt;
  );
};

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;&amp;lt;HeavyChild /&amp;gt;&lt;/code&gt; is not created inside &lt;code&gt;&amp;lt;MovingComponent/&amp;gt;&lt;/code&gt;.&lt;br&gt;
It’s created inside &lt;code&gt;&amp;lt;OuterComponent/&amp;gt;&lt;/code&gt;, and then passed down as a prop (children).&lt;/p&gt;

&lt;p&gt;When &lt;code&gt;&amp;lt;MovingComponent/&amp;gt;&lt;/code&gt; re-renders (because of its own state changes), React reuses the same children object it received last time — since its reference hasn’t changed.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Result?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;&amp;lt;MovingComponent/&amp;gt;&lt;/code&gt; re-renders.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;&amp;lt;HeavyChild/&amp;gt;&lt;/code&gt; does not re-render, because React sees the element as identical to before.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Takeaways&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;children&lt;/code&gt; is just a prop — but its reference stability can prevent unnecessary renders.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;React elements&lt;/code&gt; are &lt;strong&gt;immutable&lt;/strong&gt; JavaScript objects — they only change when re-created.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;If you create a child element outside the rendering component, it can remain stable even when the parent re-renders.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>react</category>
      <category>frontend</category>
      <category>advanced</category>
      <category>javascript</category>
    </item>
    <item>
      <title>React Developers: You Don’t Always Need memo</title>
      <dc:creator>Arjun R Pillai </dc:creator>
      <pubDate>Sun, 03 Aug 2025 19:00:07 +0000</pubDate>
      <link>https://forem.com/arjun_dev/react-developers-you-dont-always-need-memo-4fmp</link>
      <guid>https://forem.com/arjun_dev/react-developers-you-dont-always-need-memo-4fmp</guid>
      <description>&lt;p&gt;&lt;strong&gt;It's well-known that when a React component re-renders, all of its children re-render too.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Consider this scenario: We have a parent component that updates its state frequently (e.g., on mouse move) and a child component inside it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5t11k7w6acravu501xv0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5t11k7w6acravu501xv0.png" alt="The &amp;lt;HeavyChild /&amp;gt; component re-renders on every mouse move due to being nested inside the state-updating MovingComponent." width="800" height="355"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here, every time the mouse moves, &lt;code&gt;&amp;lt;MovingComponent/&amp;gt;&lt;/code&gt; re-renders, which also forces &lt;code&gt;&amp;lt;HeavyChild /&amp;gt;&lt;/code&gt; to re-render—even if it doesn’t need to!  &lt;strong&gt;As the child is heavy, this can seriously impact performance&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;✅ &lt;strong&gt;&lt;em&gt;Common Solution:&lt;/em&gt;&lt;/strong&gt;&lt;br&gt;
We typically solve this by wrapping &lt;code&gt;&amp;lt;HeavyChild /&amp;gt;&lt;/code&gt; &lt;strong&gt;React.memo to prevent unnecessary re-renders&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;But here's another elegant approach that doesn’t involve memo: Component Composition&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  💡  Using Component Composition
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Instead of defining the child inside the parent, extract it and pass it as children:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1gcqyt2tt8coz9a2o8c6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1gcqyt2tt8coz9a2o8c6.png" alt="Using component composition ensures &amp;lt;HeavyChild /&amp;gt; doesn’t re-render unnecessarily, since it's passed as a child from outside MovingComponent." width="800" height="557"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Now, &lt;code&gt;&amp;lt;HeavyChild /&amp;gt;&lt;/code&gt; is created outside , so it won’t re-render whenever the MovingComponent’s state updates.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;🔥 Takeaway:&lt;br&gt;
memo is great, but sometimes restructuring your component tree using composition is a cleaner, more natural way to prevent unnecessary re-renders and improve performance.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>performance</category>
      <category>advancedreact</category>
      <category>reactjsdevelopment</category>
    </item>
  </channel>
</rss>
