DEV Community: Thiyagaraj T

React useState lazy initialization in one glance

Thiyagaraj T — Tue, 17 Nov 2020 17:17:53 +0000

How

useState is the simplest React hook out in wild but it has a very interesting feature — lazy initialization
If you provide useState with a function, then it will be executed only on the initial render.


// For every render
const [state, setState] = useState(window.localStorage.getItem("key"));

// Lazy Initialization - Only once
const [state, setState] = useState(() => window.localStorage.getItem("key"));

When to use

Any function that is computationally expensive can be initialized lazily.

Reference
https://reactjs.org/docs/hooks-reference.html#usestate

How to do Simple Progressive Image Loading in React (Like Medium)

Thiyagaraj T — Mon, 16 Nov 2020 15:09:02 +0000

You must have come across the pretty nice progressive image loading by Medium . First, it loads a small blurry image, and then fades in to the large image. José M. Pérez has dissected this technique in his article on how Medium & other sites achieve this. In this article you will learn how this effect can be implemented in React and achieve the same easily.

Progressive Image Loading in Medium

Before diving into the code, What is the value addition?

Images are a powerful expression for content-driven websites & applications. Considering the range of user device capabilities & network bandwidth, the technique around loading images becomes crucial. Developers must leverage modern techniques to build meaningful visual explorations for users.

**Better placeholder , **the thumbnails are very small, less than 2kB, its better than solid colours & loading spinners. It creates a better visual clue and makes the thumbnail aesthetically pleasing.
Lazy loading. With Lazy Loading while all the small thumbnails are requested, the large images are only requests when they are within the viewport.
*Custom Tailored Image Sizes. **CDN providers like *Cloudinary allows you to perform a dynamic transformation on the fly lets you generate these thumbnails easily and allows you to optimize the page size for the target device.

How Simple Progressive Image Loading is Achieved?

A simple breakdown of how this effect is achieved -

Encapsulate the image in a container div.
Load a tiny version of the image with the original image.
Hide the original image till it's loaded (Use the onload event for detection) and display the blurred version of the tiny version.
Once the original image is loaded, hide the blurred version with fade-in transition.

Note : Medium uses HTML Canvas to achieve the blur effect, for simplicity we can use CSS blur filter to achieve the same.

Here is the working demo of the ProgressiveImage Component in React. Feel free to fiddle with it.
Progressive-Image-Loading-Like-Medium - CodeSandbox
*The online code editor tailored for web applications*codesandbox.io

I recommend that you use network throttling and disable cache to notice the full animation in action.

Film Strip with Network Throttle

ProgressiveImage Component

Make sure you filter the props which are non attributes and delegate to the actual tag (line 39) so that the Component can be treated like any other image tag across your app. For instance if you want to set alt or add **className **the image tag.
Capture onLoad into the state to determine the exit of the blurred overlay
Use CSS filter & transition to animate the fade out effect. If you have not used CSS filter before you can learn more here
I have added a clipPath to inset(0) which solves the problem of bleeding image pixels dues to CSS blur.

Quite simple right? If you have some questions please feel free to tweet them at me.

**Follow me to stay updated with my posts. Have a great day! 🎉**

Start using Bit to build React Apps like Lego

Thiyagaraj T — Sat, 13 Jul 2019 06:46:03 +0000

Do you often end up writing similar component across multiple projects? Sometimes do you feel you could use a private NPM registry and maintain all components to share across projects. But in an agile development team; it can be challenging to pack, publish and maintain multiple components. Also once its published, you can’t easily make minor changes directly from your current project.

React components are not like libraries, they evolve at a higher pace, developers build new capabilities and extensions to components to meet application requirements.

You cannot pack it and publish on NPM like other libraries & tools. To make a small change you cannot setup an isolated workspace & introduce changes rather you would want to play around with the component in the current project itself. Once you are happy with your changes, you would wish to push these changes. Bit exactly makes this workflow possible. Import your component to your project with its source, tweak it, export, eject and its updated version is available to the rest of the team. Simple?

Bit is powerful & makes React developers life a lot easy. Its like a fusion of git & NPM just for components. Bit allows true component-driven development and treat components like first class citizens in software development lifecycle.

Bit is a great Component Workbench for React. The functional nature of React components makes Bit ideal for React. It helps a lot in saving the overhead of keeping all your components in separate repositories. You can kickoff your own component library with ease.

Make changes to your component on the spot

Bit enables you to make the change to your component literally within your current project. You don’t need to step out of your project, you can direct import the source and make your changes on the spot and experiment with your component.
You can test your changes even before publishing it. Bit makes this powerful workflow possible.
Improve discoverability of components

Search for Components on Bit

Bit is built for components & not libraries thus makes component discovery better; you can browse through the component collection developed by your team.
Search & preview the components & reuse suitable ones in your projects. Bit becomes your mini component marketplace for your team to pick from.

Truly collaborative

This distributed workflow model allows developers to import components to their projects. Bit allows you and your team to truly share code effortlessly.
Thus it allows your team to collaborate and build meaningful shared components instead of write similar logic for components in a multi-project environment.

Isolate your Component

Bit gives you the ability to assign your component compilers, essentially they are environments. It’s a special kind of extension, in order to build components. You can also write custom compilers to fit your own requirements. Also, Bit uses testers to run test cases against your components to ensure your changes don’t break.

This experience adds a new level of flexibility and speed to development workflow. Bit makes it a lot more simpler to share components across apps, team members, and use them to build new things faster.

Cheers and thanks for reading! 👏
Start building your React applications like with bit.dev

This article was originally published in https://codeburst.io/start-using-bit-to-build-react-apps-like-lego-7e14920f8de2