Gooact: React in 160 lines of JavaScript

Build your own React clone in a matter of minutes.

Introduction

  • Rendering: In this section I will show you how to transform VDOM into regular DOM.
  • Patching: In this section I am going to demonstrate why “key” property is so important and how to use VDOM for efficient patching of existing DOM.
  • Components: Final section will tell you about React Components and their creation, lifecycle and rendering procedure.

Elements

Rendering

  • Primitive VDOM rendering: Primitives — like strings, numbers, booleans and nulls — are turned into plain text nodes.
  • Complex VDOM rendering: Nodes with string tag are turned into DOM elements with recursively rendered children.
  • Component VDOM rendering: Nodes with function tag are handled separately — don’t pay much attention to that part, we are going to implement it later.

Patching

  • Re-render everything.
  • Recursively compare it with existing DOM.
  • Locate nodes that were added, removed or changed in any other way.
  • Patch them.
  • The developer can hint at which child elements may be stable across different renders with a “key” prop.
  • Primitive VDOM + Element DOM : Full render.
  • Complex VDOM + Text DOM : Full render.
  • Complex VDOM + Element DOM of different type : Full render.
  • Complex VDOM + Element DOM of same type : The most interesting combination, place where children reconciliation is performed, see details below.
  • Component VDOM + any kind of DOM: Just like in the previous section, is handled separately and will be implemented later.
  • DOM children are moved into temporary pool under their respective keys — prefixed index is used as a key by default.
  • VDOM children are paired to the pool DOM nodes by key and recursively patched — or rendered from scratch if pair is not found.
  • DOM nodes that left unpaired are removed from document.
  • New attributes are applied to final parent DOM.
  • Focus is returned back to previously active element.

Components

  • Patching: Performs further update. Sometimes DOM node already has a component instance attached to it — pass new properties to it and patch differences. Perform full render otherwise.
  • State modifier: Handles new state, fires all required lifecycle hooks and initiates patch cycle.
  • Lifecycle hooks: Set of methods that are fired throughout component life — on mount, during updates and just before it gets removed.

Conclusion

That’s all folks — we have a fully functional React clone now. I am going to call it Gooact — that would be a little tribute to my good friend. Lets take a closer look at the results:

  • Gooact supports both functional and class components — together with proper internal state handling and complete lifecycle hooks set.
  • Gooact consumes transpiled code produced by Babel.
  • Gooact fits in 160 lines of uncompressed JavaScript code.
  • Gooact doesn’t implement React Fiber due to its complexity — but I suppose I can write article about it in some point of future.
  • Gooact doesn’t track duplicate keys and that may cause bugs sometimes.
  • Gooact lacks support of additional callbacks for some methods.

Developer @ Kiev, Ukraine. Check my site for details: https://marlow.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store