Blog

Let's improve React Context performance by using react-context-selector to avoid unnecessary re-renders and optimize component updates efficiently

This article presents a common pattern for fetching data on the client side using the latest version of React (v19.1 at the time of writing) in a way that is easy to implement, clear, and robust enough to get the job done.

I believe that a website or app's progress indicator should respect the global theme and have a touch of originality. That's why I never use an external library or package for it. I prefer to create my own component, keeping it as lightweight as possible and fully customizable.

With React and Tailwind, it's a piece of cake !

This project demonstrates how to build a custom component using inputs and buttons from the Shadcn/ui library. It allows developers to attach one or more customizable action buttons before, after, or on both sides of a text or number input field.

It leverages Tailwind CSS, React, and TypeScript for full flexibility and style consistency.

The guide covers:

Initial project setup with Vite, Tailwind CSS, and Shadcn/ui

Creation of the custom component with extended input props

Dynamic rendering of action buttons via a reusable sub-component

A working usage example with icon buttons and callbacks

This solution is ideal for enhancing form inputs with additional interactivity while maintaining a clean, composable UI design.