Introducing Signals in React 🚥

Ishan Parlikar — Wed, 14 Sep 2022 05:09:26 +0000

We have all heard/used states in React. It is a way to observe a value and its change to update the UI accordingly without triggering full page refresh. It is very useful but it comes at a cost, State change triggers re-rendering of the component, Which can hit the performance.

Preact

Preact is a 3kb alternative library which uses same API as React. But since its smaller, it ships less code to the browser.
Recently, They have announced a new package which is available to install react as well called Signals.
Docs

According to Docs:

What makes Signals unique is that state changes automatically update components and UI in the most efficient way possible. Automatic state binding and dependency tracking allows Signals to provide excellent ergonomics and productivity while eliminating the most common state management footguns.

What signal does is, It is a object containing a property .value, Once defined that signal/object remains the same but its value can change and when it does it notifies this change so that reference to that value can be updated.

Couple of things that make this interesting are,

Signals do not trigger re-renders of whole component, instead they just update the value in place.
They can be defined globally and imported in other components, So whenever value for specific signal changes, It can update the UI with the value throughout the application.

To Install Signal in React

npm install @preact/signals-react

Simple Use case

import {signal} from '@preact/signals-react'

//create a signal
const count = signal(0)

const App = () =>{
 return(
   <>
     <p>{count.value}</p>
   </>
)}

Preact signal Github

So try it and let me know what you guys think.

Cheers and Happy Coding 🍻👩‍💻

Yet another Portfolio website written in SvelteKit and Tailwind

Ishan Parlikar — Sun, 21 Aug 2022 13:34:59 +0000

One of the important aspect of a developer life is to showcase his/her skills. It can be done in many ways but as a web developer we can show it through a portfolio website which can be shared easily with others.

At some time in our journey as developer most of us have developed some kind of portfolio website. My goal was the same by using some of the latest technologies and making it in a way so that anyone could modify it or update it without much of hassle. For this purpose I chose SvelteKit as my Javascript Framework with TailwindCSS and Typescript. Let me walk you through some of my thoughts which led to choose this particular stack.

PS: I am not a UI/UX Designer, But any suggestions are welcome always

Portfolio Demo
GitHub

Why SvelteKit?

I like the fact that Svelte or Sveltekit does not ship any additional library or code to the browser. It compiles down to raw JavaScript which can read by the browser efficiently.
Sveltekit gives me SSR which can help in SEO optimization but It can also do CSR and SSG.
By default it handles routing for you.

Tailwind CSS

I have been working in tailwind for a while now and It really makes my development workflow fast. I am aware of the criticism that tailwind receive and I also sometimes feel the same but for this purpose I wanted to keep it simple.On top of it, it gives me theming options so I can customize it later from a single file.
Also, I am using daisy UI on top of the tailwind for UI Components .

Typescript

Its 2022 😂

Other Libraries

Iconify
Firebase (Analytics)
Email Js For Inquiry and Contact form submission.

Now let me walk you through some of the features of this.

Minimal Dependencies and Latest technologies
Locale Ready (Add your Details in locale file and you are set). It will handle SEO tags as well.
Ready for SSR, SSG, CSR
Dark Mode/Light Mode
Firebase Analytics - Add Config into env file and start Tracking
Type-safe
Contact form submission with Email-Js.(Add the API Keys to ENV file)
SEO Ready.
Simple File Structure.
Update JSON and Image files in lib/assets/ and Go.

Performance

This website serves as a template to one who wants to get quickly started. You can customize color schemes in tailwind config files. After designing template it took me half hour to upload all the content and host it on vercel.

You can check my portfolio here Link

I know there will be some bugs and issues. If you find any please write to me or create an issue on GitHub.
Any suggestions are welcome
If you like it don't forget to ⭐ it or Fork it.

DEV Community: Ishan Parlikar