React is usually praised for component composition over other frameworks. But in reality Angular’s composability is hard to beat. The main reason is Directives. Smallest building block in Angular is not component, its directive. A directive can attach itself over a component/DOM element and do a small piece of logic. Now you can create a bunch of directives and you can use it in any combination over any element. One can argue React Hooks can provide the same. While hooks are a good place to host such small atomic logic, it doesn’t attach itself declaratively to a an element/component, you have to wire the props of the component/element manually to the hooks where the logic is present. That itself will create a lot of code.

It is a common expectation for dashboards to have draggable widgets. In this article, we are going to see how we can make a draggable layout without using any libraries. We are going to use only React and CSS Grid and make something that looks like the following image.

useImperativeHandle hook is an unusual hook in React, to an extent that it is discouraged to use in the React’s official documentation. React is a declarative framework and as the hook’s name suggests, it is giving a break from React’s declarative style by letting parent component call functions within the child component.

Imagine, you are having a component which is making a REST API call when it is mounted, to fetch data and display it. How to write Unit Test for such a component? In this article we are going to see how to write Unit Tests for such case without any third part utilities other than Jest and react-testing-library.

Go 1.16 has come out with a feature which I waited for quite some time. With Embed we will be able to add static files into the go binary at build time. It also makes accessing the files as simple as dealing with File System APIs.

Sometimes we would like to postpone loading data in a component till it is actually visible in the viewport. This is handy in applications where we have lots of tables with data that should be loaded only when we scroll down. This behavior could be used in a variety of cases in different components, so we are going to make it into a reusable custom hook so that we can use it wherever we would like to.