DEV Community: Aman Jain

Unlocking Performance Gains in React: The useRef Advantage

Aman Jain — Sun, 18 Feb 2024 19:47:39 +0000

Introduction:

In React applications, optimizing performance is crucial for delivering a smooth user experience. One common optimization technique involves minimizing unnecessary re-renders, especially in components that frequently update state. While useState is a powerful tool for managing component state, it can sometimes lead to performance issues, particularly when used in scenarios where state changes trigger frequent re-renders. In such cases, useRef can be a valuable alternative for storing values that do not require triggering re-renders. In this blog post, we'll explore how to use useRef to optimize React applications and improve performance.

Understanding useRef:

Before diving into its usage, let's briefly understand what useRef is. useRef is a hook provided by React that allows us to persist values across renders without causing re-renders when the value changes. Unlike useState, changes to useRef values do not trigger component re-renders, making it suitable for scenarios where frequent updates occur without affecting the UI.

Example Scenario:

Let's consider a common scenario where we want to track the scroll position of a webpage and restore it when the user revisits the page. Typically, developers might use useState to store the scroll position, causing re-renders each time the scroll position changes. However, using useRef can help us avoid unnecessary re-renders in this scenario.

Example Implementation:

import React, { useRef, useEffect } from 'react';

function ScrollTracker() {
  const scrollPosition = useRef(0);

  useEffect(() => {
    const handleScroll = () => {
      scrollPosition.current = window.scrollY;
      // Perform any additional actions based on scroll position
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  // Restore scroll position on component mount
  useEffect(() => {
    window.scrollTo(0, scrollPosition.current);
  }, []);

  return (
    <div>
      {/* Content */}
    </div>
  );
}

export default ScrollTracker;

Explanation:

In this example, we define a ScrollTracker component that tracks the scroll position of the window using useRef. We initialize a useRef variable named scrollPosition with an initial value of 0. We then utilize the useEffect hook to add a scroll event listener to the window. Whenever the user scrolls, the handleScroll function updates the scrollPosition.current value with the current scroll position.

Notice that updating scrollPosition.current does not trigger re-renders since it is a ref, not state. This ensures that frequent scroll events do not impact the performance of the component.

Additionally, we use another useEffect hook to restore the scroll position when the component mounts. This ensures that the scroll position is maintained even when the user navigates away from and returns to the page.

Conclusion:

In React applications, optimizing performance is essential for delivering a seamless user experience. By leveraging useRef instead of useState for storing values that do not require triggering re-renders, developers can significantly improve the performance of their applications. Whether it's tracking scroll position, managing focus, or caching values, useRef offers a lightweight and efficient solution for optimizing React components. By incorporating useRef into your development workflow, you can ensure that your applications are both fast and responsive, providing users with an enjoyable browsing experience.

Cheat Sheet:

useState: when you want that on change of this variable the component should update / re-render
javascript variables: when you want to calculate something on every re-render but don't want to cause re-render
useRef: when you want to keep some value across re-renders but don't want it to cause re-render

Python Shots! - Data Types

Aman Jain — Sat, 15 Jan 2022 04:58:18 +0000

Python Data Types :

None
Numeric
- int (num = 2)
- float (num = 2.5)
- complex (num = 1 + 2j)
- bool (is_num = True)
sequence
- List - [1,2,3]
- Tuple - (1,2,3)
- Set - {1,2,3}
- String - ( str = "aman" )
- Range - ( range(10) )
map
- Dictionary - {"key":"value"}

Description in Brief

List
- [10,20,30]=> to store list of elements
- mutable/can update value
- used when you need to update values time to time
Tuple
- (1,34,56,7,89,5) => to store list of elements
- indexing from 0
- immutable/ can not update values
- good and fast while looping through of getting data as it can't be updatable
Set
- {23,56,78,90,54} => to store list of elements
- no indexing
- stores unique elements only no repeatation
- fast for searching as it uses hash table concept
Dictionary
- {"key":"value"} => store elements in key value pairs
- custom indexing
- used to deal with complex data like data inside data

Which Linux Exist for What reason?

Aman Jain — Tue, 08 Dec 2020 20:28:13 +0000

Hello Folks, I was wondering that there are almost 1000 Linux distributions around us and Dammm! I just know a few of them. That was really demotivating for the first 10 seconds then I thought wait wait wait are they even used? or just developed for fun. After a deep research, I found that most of them are just started as a side project or a solution to a personal problem but some of them really makes difference and have a stand in this fast-moving world. So let's not talk and let me give a brief to you :

Ubuntu

This is a Debian based Linux which proved to give best known simplistic user experience + support, and Yessss! I also felt the same.
Points to note are:

It is providing a solid desktop (and server) experience, and it isn’t afraid to build its own custom technology to do it.
Rich of Repositories and not so fancy yet powerful at the same time

Linux Mint

Mint is built on top of Ubuntu and known for having the best media support at that time but I think now we have software like VLC to do the job. Sooooo, goodbye mint👋 We need to break up 🙈

Fedora, RedHat and CentOS

Fedora is started as a university project (as I mentioned🤭) with the aim to serve bleeding-edge software and support at the enterprise level and RedHat named community also supported the cause. But after a period of time in 2003 RedHat got divided into two entities Redhat Enterprise Linux(RHEL) and Fedora. They are still the same OS but RHEL adds extra support to companies to make some money and keep the purpose alive. But in August 2008 several Fedora servers were compromised ad that's where the boosted rise of RHEL happened. CentOS is just a copy of RHEL but it's just RHEL with less/no support.
In short, they are Linux for the enterprise.

openSUSE / SUSE linux Eterprise

Basically, openSUSE aimed to provide the best UI + powerful enterprise-level features and it is once known for its best Linux UI but eventually, Ubuntu took the crown. SUSE Linux Enterprise is the enterprise version of openSUSE.

Arch Linux

Linux known for its deep roots. That means it's once the barest and grounded Linux where you have to manually configure everything but at the same time, you have the power to do everything. And at present, if you want a User experience near to MacOS then go for it.

Kali Linux

As we already heard, Kali Linux is known for its supercool 600 preinstalled hacking tools and a super awesome UI. It is actually a Kernal Auditing LInux but often misunderstood by Hindu goddess name "kali" mata. It actually became famous when actors used it multiple times in "Mr.Robot" t.v. series.

As I mentioned there are thousands of Linux-based OS but I think every OS is there for solving a particular problem so before installing any OS just find your use case. And if you think I left something then comment it down below and Don't forget to show some love in the comments down below.

Good Luck, Happy Coding!

How to setup Android Studio in 4GB ram.

Aman Jain — Sun, 06 Dec 2020 08:49:22 +0000

For last three days I am messing with my windows 10 laptop having 4GB ram and no graphics card just for getting started with Android apps and guess what I have a solution for you.

First of all there are two facilities provided by Android Studio :

IDE for Android Development
Android Emulator for viewing output.

And minimum requirements for Android studio on Windows is:
System requirements

Microsoft® Windows® 7/8/10 (64-bit)
4 GB RAM minimum, 8 GB RAM recommended.
2 GB of available disk space minimum, 4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and emulator system image)
1280 x 800 minimum screen resolution.

So basically it is saying that you have to use all of your hardwares to the fullest but unfortunately windows don't allow us, because there are a lot of processes running in background in windows that you can't stop. This is the time you have to make a decision that do you want to work on windows or Android Apps. I made a decision and chose Android apps over windows. So Right now I have a laptop and a will to work on Android. I started trying different solutions one after another and lucky me, the last one worked.

The solution for how to install Android studio in 4gb ram and no graphics card

Now you need two things

The guide of how to do it
5-10 GB of internet.

Do you know that why linux based operating systems don't get viruses? Because viruses are also programs and to run a program you need permission. Now windows allows permissions to some programs by itself but on linux you even can't do +,- without permission. And that is the reason why macOS got its popularity.

Now since you are working on windows you have two options

Remove windows and completely work on Ubuntu ( Linux based OS with very nice UI like windows, the most user fiendly linux OS )
Use a technique known as dual boot where you can easily work on two OS ( windows + Ubuntu ) simultaneosly on same PC without harming anyone. Yes of course I preffered 2nd one

Go to "you tube" and search for "how to dual boot ubuntu on windows" and you will get the point. The above process will take your 3gb.

Now by any means you should have your ubuntu linux. Now Inside ubuntu open Ubuntu Software store , search for Android Studio then install it. Anddddd boom! Now you can easily launch android studio. But wait follow this You Tube Video to setup Android Studio.

You may face problems and I think as a developer this is what we always have to do: solve problems to achieve smething. So don't get demotivated and face them because I also did and I assure you that Android studio will work on your pc.

Now I will assure that you can easily write java/kotlin code in android studio but right now if you run your code Android Studio will crash due to low Ram. The solution is to attach your own android smartphone to Android studio and see results there as shown in above you tube video OR try this You Tube Video

Just a quick fact Do you know: you can also do android development in Eclipse and Idea IntelliJ.**

Final Words

Your Final Setup looks like: Ubuntu (Any linux based OS) + Android Studio + Android Smartphone

See there is going to be a lot of hard work while doing Android development this way but when you launch your first Android App everything will pay oFF.

Let me know in comments that is this blog useful or not and if you need a video tutorial on this, show some love down in comments

Good Luck and HAPPY CODING!!!

Getting Started with React Native

Aman Jain — Thu, 03 Dec 2020 13:39:59 +0000

React Native and react ecosystem

To be really clear react is a Javascript library for building User interfaces, ReactDOM.render(...) adds web support otherwise React itself is platform-independent.

So what's react-native? It is a collection of special react components that are compiled to native app widgets. It acts as a bridge between Javascript and native platform code(java...).

Hence React + React Native = Real Native Mobile Apps (Android+IOS)

For Example

function comp() {
  return (
    <View>
      <Text> Hello !!! </Text>
    </View>
  );
}

Note: here View and Text are special components provided by react native and hence compiled into native widgets but the syntax is still react.

How React Native works :-

Now since we have a introduction about react native now we can start working on react native. There are two ways to start working with react native

Expo Client CLI = For beginners
React Native CLI (barebone) = For advance people

Expo is an extra wrapper on React native CLI which makes react native development workflow easy and effective. To get started visit https://docs.expo.io/ and follow the expo documentation.
There is one more special feature of the expo, even if your system doesn't have good ram then you can go to https://snack.expo.io/ and start creating react native apps on your browser itself and you even don't need a mobile phone. With that said go ahead and setup expo and react native so that we can start coding apps.

Note: this is the first blog from my upcoming blog series on React Native and aiming to strengthen React Native community. So if you already know react native contribute with me or if you are new show some love.