Understanding React’s render and diffing mechanisms with Preact.

Image for post
Image for post
A guy on a mountain top celebrating and the summit of the mountain range next to him. Photo by Zach Callahan on Unsplash.

It has been a while I had this curiosity to dig into React’s code-base and find out how its internals and how the mysterious diffing algorithm works. While I was searching more on this I found this React alternative library called Preact which has smaller code-base than React but provides the same declarative API. This article is based on Preact’s code-base which should be somewhat similar to React’s actual implementation.

Preact is Fast 3kB alternative to React with the same modern API.

Assuming we are writing in ES6 syntax with JSX let’s begin from following code block which is the initial step in every (p)react app. …


Image for post
Image for post
A guy swimming alone. Image courtesy: Canva.com

There can be a scenario where you need to add an endpoint to your React Storybook project to test some component’s functionality. Recently I came across the above scenario and have to find out away.

What I found out is React storybook indeed have this functionality implemented and hidden deep down in its pull requests and not properly documented. Hence this post.

We need to add a new file named middleware.js inside .storybook folder. This is the file where we customize the router. …

About

Sasitha Sonnadara

Software Engineer and a DIY Enthusiast.

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