Forem: Aman Sethi

Thoughts of a junior software engineer on useEvent hook in react 18

Aman Sethi — Sat, 02 Jul 2022 20:08:59 +0000

A Hook to define an event handler with an always-stable function identity.

The above line is from the description of the useEvent hook in the rfc released by React team - https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md

React team recently announced they are working on a new hook called useEvent, I am fascinated by the use case it solves in our application code -

1) to prevent unnecessary re-render of child components even though the function uses the latest values from the parent component. example -

in this code, on every user input change, the ChildComponent will re-render,this can easily be prevented with a useCallback with dependencies on text, but that would not be useful as in dependencies, we will use text, and it will still cause the child to re-render on every input change, here comes our saviour useEffect, so if we wrap the sendMessage function with this hook, the child won't re-render, and when called on click it will consume the latest state of text in the parent too, this is really useful as it removes the pain of finding the right dependencies to be added in the useCallback to improve optimisation, let's see what have we changed with useEvent -

2) is not a replacement of useCallback hook
The main difference I see between useEvent and useCallback is if the functions need to be called in child with the latest data at a later stage on change of event, we should use useEvent(whenever it is available in react offical release) otherwise when we want component's UI to be updated(or show calculated UI data) on change of a state in parent we should use useCallback.

The useEvent can solve the issue of revalidating too much of the useCallback but it doesn't solve every usecase and is discussed more on the rfc too.

But in the meanwhile, I wrote this article. In the current version of React, the useEvent hook is not available. So keep your eyes peeled for another update! Thank you for reading. I hope you like it. 👋🏼

Typescript = Javascript with benefits

Aman Sethi — Sun, 09 May 2021 18:23:36 +0000

Hello everyone,hope you are taking good care of yourself in these times and coding everyday.Js is a must learn language when working with web related projects,be it frontend related or just backend.Modern libraries and frameworks use JS and many developers love using it but it doesn't mean we should totally outlook areas where JS is not efficient.Since JS is dynamic typed languages, variables can be abused in the codebase and it will not be known to the program until it is executed, that is during runtime.

Here comes Typescript to save you by throwing errors everytime some types go wrong,don't worry we will look into types more below.

What is Typescript?

TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions.

Let's first look at the difference between static typed vs dynamic typed language-

Static Type

The language where types of variables are checked during compile time.Here in the code if we defined variable of type string and assign a number later to it,the compiler will show error.
Example - C++,C,Java

Dynamic Type

The language where types are checked at runtime(during execution).
Example:Python,Javascript

Typescript is essentially javascript with static type,which means we won't get the freedom to change variable types without letting typescript know in advance,to understand more what I mean look at the example below.

Why Typescript

To explain why ts ,let's see why not js,we all know javascript is hated for its unexpected behaviour like in the following example:

const addNumber=(someNumber)=>{
 return 1+someNumber;
}
//calling the function with a number 
console.log(addNumber(2));
//calling the function with a string
console.log(addNumber("Aman));

Our plain old javascript will not complain(throw an error) and will show the behavior we all are familiar with,but when working with larger codebase in organisations this behaviour might get caught only during runtime.Now here comes typescript to save us from doing these mistakes by static typing.

How does TS solve this

All valid JavaScript code is also TypeScript code. You might get type-checking errors, but that won't stop you from running the resulting JavaScript. While you can go for stricter behavior, that means you're still in control.

The power of TS comes from defining types.When writing functions we define types of the parameters required,this way ts checks the type of arguements passed matches the type of parameters.

Let's look at the code for the above example in typescript and observe the behaviour

const addNumber = (someNumber:number)=>{
  return 5+someNumber;
}
//will give error saying "Argument of type 'string' is not assignable to parameter of type 'number'"
addNumber("hello");
//will give error saying "Argument of type 'boolean' is not assignable to parameter of type 'number'"
addNumber(true);
//ts happily compiles it,no error
addNumber(5);

Just by writing some types, TS saved our debugging time,this part is super important as when code grows and if we were using js these errors could only get caught in the runtime.

So ok writing types saves us from errors but is there more which ts does?
Added benefits which comes along using ts are:

1.Speeds up development

When used with proper types ts doesn't let us use other types and in a component we don't have to look in the file it was defined to send the props requires as ts will show error id more or less than defined props are send in the component.
Look at the following code:

type ComponentProp = {
  x:string,
  y:number 
}
const Component=(props:ComponentProp)=>{
  return (
    <>
    {/* using the code */}
    </>
  )
}

Now when passing props in this Component in out App.js,it checks and if it doesn't match the ComponentProp types shoes error

export default function App() {
  return (
    <div className="App">
      <Component x={56} /> {/*shows an error saying "Type 'number' is not assignable to type 'string'"*/}
      <Component x={"Aman"}/>{/* shows an error saying "Property 'y' is missing in type '{ x: string; }' but required in type 'ComponentProp'" */}
    </div>
  );
}

This way just looking at the error we know what to pass as props and also with typechecking of ts prevents passing extra or less number of arguements.

2. Refactoring becomes super easy

Now one of the dev from your team decides to refactor a component or a function,she can't just add some parameters on the Component/function and forget to add it in the rest of the codebase as typescript will throw errors guiding her to solve the error with descriptive error messages

3. Provides first layer of documentation

So you wrote code with types with good type names and now whenever some new from another team needs to understand the codebase,she could get the rough idea by looking at the types for the component/function,just that simple.

Conclusion

In my opinion to use TS or to keep using JS in projects is choice which entirely depends on your project,as if you are working solo on a project it is ok to use JS and get your work done with it as chances are it will be you who is going to maintain/refactor the code.When working with teams is when TS can be used along with its superpowers,ofcourse.

Thank you for reading till here,I hope it added value to your learning.Please feel free to comment your thoughts on this blog.

I actively tweet my learning.For more updates follow Aman Sethi

How is React different from vanilla JS

Aman Sethi — Fri, 11 Dec 2020 09:14:06 +0000

Vanilla Js

VanillaJS is a name to refer to using plain JavaScript without any additional libraries. All major web browsers have a built-in JavaScript engine that executes the code on the user's device. It is the language to communicate with the browsers directly. Let it be any framework Angular, React, etc they are all built on top of vanilla JS. When making small web apps using vanilla JS or any of the framework wouldn't make any big of a difference. But when there are more functionalities to be added code gets messier.

React

It is a framework built on vanilla JS. Think of it as the middleware to communicate with the browser. Modern browsers provide many functionalities that improve user experience and provide good visual animations also. To communicate with the browser we use vanilla JS. But the code gets many times too long making things look complicated in vanilla JS. React hides these complexities and let a developer access the features of the browser using less code. Also, I would like to remind you here that React is a declarative language for this reason.

React is a Component-Based framework. This means components are once written and used multiple times within the app. In vanilla JS it is not the same case as everything has to be hard-wired to make things work.

React can also render on the server using Node and power mobile apps using React Native.Many companies use React Native for their mobile app because the same code can be deployed to both Play Store and App Store.This helps them ship out new features and information to their users in less time.

I hope that this article helped you learn something new today. If it did you can follow me on Twitter, to stay connected.

Shallow Copy vs Deep Copy in JAVASCRIPT

Aman Sethi — Thu, 03 Dec 2020 17:19:32 +0000

Shallow copy and deep copy are used to copy objects in javascript. Before directly jumping into the differences first let's see why objects are not copied using = operator.

= operator makes a reference to the same memory location and does not actually copy. Let's understand it with the example-

Thus it is clear from the example that a and b are both references to same memory location.So we cannot copy using = operator.

Shallow Copy

It is used to copy objects which are not nested(i.e. do not contain another object within them). There are two methods -

1.using spread(...)

Here when c is modified,a remains the same so c is a copy of a.

2.using Object.assign() method

Here when d is modified, a remains the same so d is a copy of a.

Deep Copy

Deep copy copies the objects irrespective of whether it is nested or not.It uses JSON.stringify() and JSON.parse() methods.Let's understand it with an example that has nested objects-

Applying one of the methods of shallow copy-

Observe that when the nested object of b is modified a also gets modified. The reason behind this is shallow copy in case of nested objects use the reference of nested objects and only make copy the parent object.

Applying JSON.stringify() and JSON.parse() methods for deep copy-

Here when the nested object of c is modified a remains the same.

I hope this blog helped you understand the differences between Deep Copy and Shallow Copy in javascript.

How I created a translator web app using HTML,CSS and JAVASCRIPT

Aman Sethi — Wed, 02 Dec 2020 05:03:46 +0000

There are three things that are needed for an application-input,processing and output.For processing in this app means translation.We will be using funtranslation api which returns translated content.

Funtranslations API

There are so many translation languages available which can be used for translations.Here we will be using minion language and to get response from the api we need to send the url in the given format-

Taking user input

For any translator app, the first thing needed is the user's input so we that using textarea tag of HTML.

Processing user input

For processing which is done in our app.js, we reference textarea in javascript using document.querySelector()

Now we have reference to input and to extract the value from this we will use textInp.value.But first, we will make a function to get our translation url which we will be using it to fetch translated text from the server using the funtranslations api

Here serverUrl is the base url which is required for API. Now a fetch function which gets the translated text and displays output using innerText on an output element also referenced using document.querySelector()

Translated output to the user

We will create a div that has no text and will show output after processing when the button is clicked.

Button referenced in the script and added an event listener addEventListener() on it which waits for a click on the button and then calls our clickHandler function.

To check the live demo of this app you can go to Banana app
Also I have created a repo on github.

This is my first blog. Suggestions are welcome from all of you. Thank You.

To know more about me, you can connect with me on Twitter.