DEV Community

Asish Raz
Asish Raz

Posted on

1

Diffing in React

As a react-developer, you must come across the topic DIFFING.
I read few articles and understood the basics of them. And out of nowhere, I thought of sharing my knowledge in a simpler way or maybe in a non-technical way. 😜😜

Think for a moment, Whatsapp as a VIRTUAL DOM
Let suppose, JSX element have their own Whatsapp Group(group name is Virtual DOM Object)
Now, there is a member of this group, who wants to update itself and not the rest.

Now the admin of this group: REACT thought of making a new group very similar to the existing one(which means, the new list of objects).

Obviously, this group will also exist in Whatsapp only (that means, VIRTUAL DOM)

In both the groups, REACT is the only admin.
And REACT observe both the groups from the top-level and wanted to see, which member of the existing group has been changed(that means, which of the VIRTUAL DOM Object has been changed)
And it found out the member.

So, this process of finding out or the comparison (in React language) is called DIFFING.

That's it.

Thank you for taking out your time and reading it. I tried for the first time, writing some tech article like this. Let me know, your thoughts on it.
Any appreciation, criticism are welcome. 👍

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay