Forem: Nithyanandam Venu

Immutability and why you need to know its importance!

Nithyanandam Venu — Thu, 14 Mar 2024 16:22:13 +0000

If you are working with javascript, you must give a lot of importance to the immutability.

What is immutability?
Immutable means something that cannot be changed. In programming, immutable is used to describe a value that cannot be changed after it's been set. But do you know Primitives in JavaScript: Naturally Immutable! specifically, arrays and objects that we commonly use.

Why it matters?
Let's see with a simple example. (kept the example very naive to showcase the impact of immutability, in real time you would be passing around your objects more than you imagine knowingly or unknowingly!)

let person = {name:"John", age: 30};
const original = () => {
   console.log(person.name,person.age)
}
original() // prints john,30

Now let's assume, we have another function where I want to just change the name for another person and print.

let person = {name:"John", age: 30};
const original = () => {
   console.log(person.name,person.age)
}
original() // prints john,30
const newPerson = (newsperson) {
  person.name = 'jake';
  console.log(newsperson.name,newsperson.age)
}
pass(person) //print jake,40

what would the original() function print now? *john,30, or Jake,40.
orginal() //it would print jake,40 as well *

Because of the immutable nature of the object. If you pass around your data in objects and array lot over your application without worrying about immutability, trust me you are going to headache on where your original values got changed.

The simplest way to overcome is this to take a copy of the object. It can be a deep clone or shallow based on your need.

const newPerson = (newsperson) {
  person.name = 'jake';
  console.log(newsperson.name,newsperson.age)
}
pass(...person) //taking clone of the object instead of direct reference so orignal object remains same!

Why Is Immutability Important?

Once an immutable value is set, it isn't changed. Rather a new value is created. This makes the value predictable and consistent throughout the code. So it aids in managing the state throughout the application. Plus immutability is a key principle in state management frameworks, such as Redux.
Code becomes simpler and less error-prone when data structures don't change unexpectedly. This also simplifies debugging and maintenance.
Embracing immutability is in line with functional programming principles, leading to fewer side effects and more predictable code.

I hope now you get the picture of why immutability is very important to keep your code predictable and adhere to the functional programming principle and mainly to avoid unwanted debugging headaches.

Ref: https://www.freecodecamp.org/

React 19 is coming and What's new?

Nithyanandam Venu — Sun, 10 Mar 2024 07:17:58 +0000

As I eagerly await React 19, let's explore the exciting new features it brings to the table with its release.

React Compiler

One of the most common challenges in React development is avoiding unnecessary re-renders. Although we've had tools like useMemo, useCallback, and **memo **for manual state caching to mitigate this issue, React Compiler promises to address it automatically without requiring manual intervention. This should result in noticeable improvements in performance and the prevention of unwanted re-renders.

The great news is that "React Compiler is no longer a research project: the compiler now powers instagram.com in production, and we are working to ship the compiler across additional surfaces at Meta and to prepare the first open-source release - React Dev".

Action

Another exciting addition is the introduction of Actions, providing a more efficient way to interact with the server. Actions allow you to attach a function to DOM elements such as </form>.

<form action={search}>
 <input name="query" />
 <button type="submit">Search</button>
 </form>

When using an action, React manages the lifecycle of data submission for you, offering hooks like **useFormStatus **and useFormState to access the current state and response of the form action.

By default, Actions are submitted within a transition, ensuring that the current page remains interactive while the action is processing. Additionally, Actions support async functions, allowing the use of async/await in transitions. This enables the display of pending UI with the isPending state of a transition when an async request starts, and maintains the pending UI until the update is applied.

Another noteworthy feature is useOptimistic for managing optimistic state updates, but we won't delve into the details of that just yet.

New Features in React Canary

For those eager to try out new stable features before the public release, React Canary will prove invaluable. This allows React developers to gather feedback from the community before the stable release, facilitating further improvements.

React Server Components, Asset Loading, Document Metadata, and Actions are all available in React Canary already.

There's still more to come. In React 19, additional improvements are on the horizon, including long-requested enhancements like support for Web Components. The focus now is on finalizing these changes, preparing for release, updating documentation for new features, and announcing what's included.

It's clear that significant changes and improvements are on the way, and I can't wait to give them a try. Let me know which feature you're most excited about—I'm personally intrigued by the React Compiler and React Server Components.

For more Info follow https://react.dev/blog

Why to use keys in list in React?

Nithyanandam Venu — Tue, 19 Apr 2022 10:15:45 +0000

Recently i came across a Linkedin post about use case of keys in react without specifying the details under the hood. Hence decided to decode it out in this post. Now Let's see what's happening under the hood of react when we add keys to our list.

Ever wonder how react detect the Dom has been updated? React uses the state of art diffing algorithm to do reconciliation. And do you know it have o(n) complexity?

The algorithm follows this two basic principle

1.Two elements of different types will produce different trees.
2.The developer can hint at which child elements may be stable across different renders with a key prop.

Ok how this helps out us, lets take one example DOM list

<ul> <li>1</li> <li>2</li> </ul>

Now let's say you want to add one item at the start.

<ul> <li>3</li> <li>1</li> <li>2</li> </ul>

Now react will compare both this Dom and have to iterate then have to figure out both the list item 1 and list item 2 have been not changed. Then have to add the list item 3 at start.

Let's just imagine if our list have 1000 of elements which need to be updated frequently. Our app would be have a worst performance nightmare.

Now lets see how this works differently when you add a key

<ul> <li key='a'>3</li> <li key='b'>1</li> <li key='c'>2</li> </ul>

Now when react compare the Dom, it exactly knows a has been introduced newly and no change has happened on b and c so it will just add the a list item in the list. In this way it will avoid iteration as well.

Also make sure you are not keeping the index as key which is not recommended by react as it might result in unexpected re-render behaviours. Make sure to use unique key elements always.

Hope now it's clear that why adding a key would be very important in react and how it can improve the performance so well.

you can check more about the diffing algorithm here

How I build my own stand-up reminder

Nithyanandam Venu — Mon, 18 Apr 2022 07:11:27 +0000

Before we get into details, let me put out the reason behind this effort. As the pandemic hits and WFH starts, my physical activity has been reduced drastically. And I was spending even more time on my desk compared to the office environment. Since my entertainment also lies within my desks such as gaming and reading. The continuing situation put a toll on my back hence I decided to act on it.

As the saying goes ‘start small’. I have narrowed down the possible option to improve my physical activity and decided to follow it up. The simplest one is standing up at regular intervals after sitting down at the desk for a while.

This is something that can be accommodated easily in the schedule right. Hence I picked it up and searched for a stand-up reminder on google. Unfortunately, there are not any simple options present to use effectively on my laptop.

And yea obviously I don’t want to extend this into my smartphone. As my digital time is already too high and also it would easily make me get distracted by my smartphone.

Ok time to get hands dirty. So in hindsight, I planned out a simple HTML page that can load out an audio/video in a set period of interval time, and keeping the chrome tab on would be the only downside of it I thought also dumped the idea of using audio since I couldn’t find any proper web API to get audio content. Decided to go with youtube video as it was an easy option.

So coded out a simple HTML page and when I tried to autoplay on the iframe. Chrome was smart enough to not let me autoplay the video with sound as an access policy.

Even though that made me annoyed, kudos to chrome which doesn’t want to annoy the user by playing autoplay video even worse if the user is not even in the tab, he would have to go through all tabs and figure out where the sound was coming from.

So it was a pretty good fix and access policy from chrome. What I thought would be a 5 mins work taught me about chrome access policy and youtube embed options.

Now I am almost stuck and also I don’t want to spend more time on it. Time to rethink my decision!

Ok now let’s ditch chrome and go for a native app. Do I know native desktop app development? no obviously. Currently is there any place where you can’t run javascript?

Here comes the saviour electron. Going to do the same implementation but just going to transfer it to the native app. According to my assumption, it should work 100%. Again there is no time to learn the design fully.

Took out the hello world example and modified it a little specifically removing the same origin cors policy meta in HTML to load out the youtube video.

Hola! It worked like a charm!!

Set your duration in minutes. Put your favourite video URL from youtube. Our Standup Reminder is ready to go! Minimize the app and do your stuff. Once the time interval hits, the video will play automatically.

For example, you can set it to 60 minutes and it will play every one-hour interval and you can use it to remind yourself to take a break and stand up.

Don’t want the reminder just close the app. Was it too much to do for a simple stand-up reminder? Might be, but why not have fun when you can!!

So this is how I build my own stand-up reminder. It took an hour almost. Was it worth doing? absolutely. Want to check out the project and use it for yourself https://github.com/vbinithyanandamv/Stand-Up-Reminder. Check out the repo.

Should I polish it out and publish it as an app and share it with non-programming folks let me know in the comment. Have any feature ideas for this please feel free to let me know!