DEV Community: Sayuj Sehgal

Mastering Node.js Development with Node Version Manager (NVM)

Sayuj Sehgal — Sat, 15 Jun 2024 02:00:51 +0000

As a Node.js developer, you might have encountered situations where different projects require different versions of Node.js. Managing multiple versions of Node.js can be a hassle, but Node Version Manager (NVM) simplifies this process. In this blog post, we'll explore what NVM is, how to install it, and how to use it effectively.

What is Node Version Manager (NVM)?

Node Version Manager, commonly known as NVM, is a handy tool that allows developers to install and switch between different versions of Node.js effortlessly. This flexibility is essential for developers working on multiple projects that may depend on different versions of Node.js. With NVM, you can ensure that each project uses the correct Node.js version without interfering with each other.

Why Use NVM?

1. Multiple Node.js Versions:

NVM lets you maintain and switch between multiple Node.js versions on your machine. This is particularly useful if you're working on legacy projects that require older versions of Node.js.

2. Easy Updates:

Keeping Node.js up to date is crucial for security and performance. NVM makes it easy to update Node.js to the latest version without disrupting your existing setup.

3. Environment Isolation:

Different projects often have different dependencies and requirements. NVM ensures that each project can run in its environment with the appropriate Node.js version, avoiding conflicts.

Installing NVM

Before you can start using NVM, you need to install it. Here’s a step-by-step guide:

On macOS/Linux:

Open Terminal.
Run the installation script:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Update your shell profile: Add the following lines to your ~/.bashrc, ~/.zshrc, or ~/.profile file:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Source your profile:

source ~/.bashrc
# or
source ~/.zshrc
# or
source ~/.profile

On Windows:

For Windows users, it's recommended to use nvm-windows. You can download it from the nvm-windows GitHub repository and follow the installation instructions provided there.

Using NVM

Once you have NVM installed, using it is straightforward. Here are some common commands:

Installing a Node.js Version

To install a specific Node.js version, use:

nvm install <version>
# Example:
nvm install 16.14.0

Listing Installed Versions

To see all installed Node.js versions, use:

nvm ls

Switching Node.js Versions

To switch to a different installed Node.js version, use:

nvm use <version>
# Example:
nvm use 14.17.0

Setting a Default Node.js Version

To set a default Node.js version to use in new shells, use:

nvm alias default <version>
# Example:
nvm alias default 16.14.0

Uninstalling a Node.js Version

To uninstall a Node.js version, use:

nvm uninstall <version>
# Example:
nvm uninstall 12.18.3

Advanced NVM Usage

Running a Specific Node.js Version Temporarily

If you need to run a specific Node.js version for a single command, you can prefix your command with nvm run:

nvm run 14.17.0 <your_command>
# Example:
nvm run 14.17.0 node -v

Listing Available Node.js Versions

To see a list of all available Node.js versions that can be installed, use:

nvm ls-remote

Installing Node.js with LTS (Long Term Support)

For stability, it's often best to use LTS versions of Node.js. To install the latest LTS version, use:

nvm install --lts

Conclusion

Node Version Manager (NVM) is an indispensable tool for any Node.js developer. It simplifies the management of multiple Node.js versions, ensuring that you can work on different projects with ease and confidence. By using NVM, you can keep your development environment clean and organized, avoid version conflicts, and stay up-to-date with the latest Node.js releases.

Mastering NVM will undoubtedly enhance your development workflow. Give it a try, and you'll wonder how you ever managed without it.

Happy Coding!!

Scale Like a Pro: Essential Strategies for High-Performance Node.js Applications

Sayuj Sehgal — Fri, 22 Mar 2024 17:14:58 +0000

Node.js has gained popularity for its efficiency in handling I/O-bound tasks, but scaling it for CPU-intensive applications requires careful consideration. In this blog post, we'll explore strategies and best practices for scaling Node.js instances to handle CPU-heavy workloads efficiently.

Understanding CPU-Intensive Applications:

CPU-intensive applications are those that heavily rely on processing power rather than I/O operations. Examples include image processing, video transcoding, encryption/decryption, and mathematical computations. These tasks can consume a significant amount of CPU resources, potentially leading to performance bottlenecks if not managed properly.

Challenges in Scaling CPU-Intensive Node.js Applications:

Node.js applications run on a single thread by default, which poses a challenge when dealing with CPU-bound tasks. Scaling such applications requires leveraging multi-core CPUs effectively and distributing the workload across multiple processes or threads.

Strategies for Scaling Node.js Instances:

1. Cluster Module:

The cluster module allows you to create a group of Node.js processes (called workers) that all run simultaneously. When the main process (called the master) starts, it can fork off one or more worker processes. These workers can all share the same server port, allowing them to handle more incoming requests than a single process could. This is particularly useful for taking advantage of multi-core systems, as each worker runs on a separate CPU core. However, each worker runs in its own memory space, so you can't share state directly between workers.

Here's how you can use it:

const cluster = require('cluster');
const os = require('os');

if (cluster.isMaster) {
    const cpuCount = os.cpus().length;  // Get the number of CPU cores

    // Create a worker for each CPU core
    for (let i = 0; i < cpuCount; i++) {
        cluster.fork();
    }

    // Listen for dying workers
    cluster.on('exit', function(worker) {
        console.log('Worker %d died :(', worker.id);
        cluster.fork();  // Create a new worker
    });

} else {
    // This is not the master process, so we spawn the HTTP server.
    const express = require('express');
    const app = express();

    app.get('/', function(req, res) {
        res.send('Hello from Worker ' + cluster.worker.id);
    });

    app.listen(3000);
}

2. Worker Threads:

The worker_threads module, on the other hand, allows you to do actual multithreading in Node.js. Unlike the cluster module, worker_threads allows you to share memory between threads through SharedArrayBuffer objects. This can be more efficient than the cluster module for certain tasks, but it's also more complex because you have to deal with issues like synchronization and potential race conditions.

Here's a simple example of how you can use the worker_threads module:

const { Worker, isMainThread, parentPort } = require('worker_threads');

if (isMainThread) {
    // This is the main thread.

    // Create a new worker
    const worker = new Worker(__filename);

    // Listen for messages from the worker
    worker.on('message', (msg) => {
        console.log('Message from worker:', msg);
    });

    // Send a message to the worker
    worker.postMessage('Hello, worker!');
} else {
    // This is a worker thread.

    // Listen for messages from the main thread
    parentPort.on('message', (msg) => {
        console.log('Message from main thread:', msg);

        // Send a message to the main thread
        parentPort.postMessage('Hello, main thread!');
    });
}

In this example, the main thread creates a new worker thread and sends a message to it. The worker thread listens for messages from the main thread, and sends a message back when it receives one.

Optimizing Code and Infrastructure:

Identify and optimize CPU-intensive code blocks.
Utilize vertical scaling by upgrading CPU resources.
Implement horizontal scaling with load balancing.
Use caching mechanisms to reduce computational overhead.

Conclusion:

Scaling Node.js instances for CPU-intensive applications requires a combination of leveraging built-in modules like Worker Threads and Cluster, optimizing code, and employing efficient infrastructure strategies. By following these best practices, developers can ensure that their applications can handle demanding workloads while maintaining optimal performance.

In conclusion, scaling Node.js for CPU-intensive applications requires a combination of leveraging built-in modules like Worker Threads and Cluster, optimizing code, and employing efficient infrastructure strategies. By following these best practices, developers can ensure that their applications can handle demanding workloads while maintaining optimal performance.

Useful Websites for Cheat Sheets and Programming Resources

Sayuj Sehgal — Sun, 17 Mar 2024 14:41:31 +0000

Here are some useful websites for cheat sheets and programming resources:

Mozilla Developer Network (MDN): This is a comprehensive resource for developers, with references and guides on HTML, CSS, JavaScript, and other web technologies. (https://developer.mozilla.org)
W3Schools: This site offers free tutorials on all web development technologies, including HTML, CSS, JavaScript, PHP, SQL, and more. (https://www.w3schools.com)
Stack Overflow: This is a community of developers helping each other solve coding problems. It's a great place to find solutions to specific issues. (https://stackoverflow.com)
GitHub: This is a platform for version control and collaboration. It's also a great place to find open-source projects and libraries. (https://github.com)
DevDocs: This site combines multiple API documentations in a fast, organized, and searchable interface. (https://devdocs.io)
OverAPI: This site provides cheat sheets for many programming languages and technologies. (http://overapi.com)
Codecademy: This is an online interactive platform that offers free coding classes in 12 different programming languages. (https://www.codecademy.com)
LeetCode: This site offers a platform for learning and improving coding skills with an emphasis on problem-solving. (https://leetcode.com)
freeCodeCamp: This is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, online publications, and local organizations that intend to make learning web development accessible to anyone. (https://www.freecodecamp.org)
GeeksforGeeks: A computer science portal for geeks. It contains well written, well thought and well-explained computer science and programming articles, quizzes, and practice/competitive programming/company interview questions. (https://www.geeksforgeeks.org)

Remember, the best way to learn is by doing. So, use these resources to practice and build projects.

Top 5 frontend frameworks for web development 2024

Sayuj Sehgal — Sun, 17 Mar 2024 05:42:39 +0000

Frontend frameworks play a crucial role in modern web development, offering developers a range of tools, libraries, and conventions to build efficient, scalable, and maintainable web applications. Here are five popular frontend frameworks along with their pros and cons:

React.js
- Pros: High performance due to virtual DOM; strong community support; flexibility and modularity; great for complex and large-scale apps.
- Cons: High pace of development, which can lead to frequent updates; steep learning curve.
Angular.js
- Pros: Two-way data binding that ensures real-time changes; robust and comprehensive; strong support from Google.
- Cons: Complex syntax; performance issues with large applications; steep learning curve.
Vue.js
- Pros: Easy to understand and develop applications; flexible and modular; good documentation.
- Cons: Smaller community support compared to React and Angular; risk of over-flexibility.
Ember.js
- Pros: Convention over configuration, which leads to productivity; strong community support; suitable for complex applications.
- Cons: Steep learning curve; less flexible compared to others.
Svelte
- Pros: No virtual DOM, which leads to faster performance; easy to learn; less code.
- Cons: Smaller community; less mature compared to others.

Remember, the "best" framework can vary depending on the specific needs of the project, the team's familiarity with the framework, and other factors.

Master React by Building these 25 Projects

Sayuj Sehgal — Fri, 15 Mar 2024 16:20:22 +0000

That's a great approach to learning React! Building projects will help you understand the practical applications of the concepts you learn. Here are some project ideas that cover various aspects of React:

Todo List: This is a classic beginner project that can help you understand state management and handling user input.
Weather App: Fetch data from a weather API and display it. This will help you understand how to work with external APIs.
Recipe Finder: Create an app that fetches recipes based on ingredients. This will help you understand how to work with APIs and user input.
Markdown Previewer: Convert markdown input into formatted text in real-time. This will help you understand how to use libraries in your project.
Chat Application: A more advanced project that can help you understand real-time communication using web sockets.
E-commerce Store: This will help you understand how to manage complex state, routing, and user authentication.
Blog: Create a blog with a CMS (Content Management System). This will help you understand how to create, read, update, and delete (CRUD) operations.
Expense Tracker: This will help you understand state management and data visualization.
Calendar: A project that can help you understand how to work with dates and events.
Quiz App: Create a quiz app that fetches questions from an API. This will help you understand how to work with external APIs and manage application state.
Movie Search App: Create an app that fetches movie data from an API based on user input.
Memory Game: This will help you understand how to manage complex state and user interactions.
Social Media Dashboard: This will help you understand how to manage complex state and data visualization.
Music Player: Create a music player that plays music from a list. This will help you understand how to work with audio in React.
Real-time Cryptocurrency Tracker: Fetch real-time data from a cryptocurrency API. This will help you understand how to work with real-time data and APIs.
Job Search App: Create an app that fetches job postings from an API based on user input.
Personal Portfolio: Showcase your projects and skills. This will help you understand how to create a professional-looking UI.
Online Code Editor: Create an online code editor that compiles and runs code. This will help you understand how to work with text input and external libraries.
Travel Agency Website: This will help you understand how to create a professional-looking UI.
Restaurant Finder: Create an app that fetches restaurant data from an API based on user input.
Image Gallery: Create an image gallery with a lightbox. This will help you understand how to work with images in React.
Fitness Tracker: This will help you understand how to visualize data and manage complex state.
Note Taking App: This will help you understand how to manage complex state and handle user input.
URL Shortener: Create a URL shortener. This will help you understand how to work with APIs and handle user input.
E-learning Platform: A more advanced project that can help you understand how to manage complex state, user authentication, and payment processing.

Remember, the key to learning is consistency. Keep building and you'll get better over time. Happy coding!

Most Commonly Asked React Interview Questions 2024 - Part 3

Sayuj Sehgal — Fri, 15 Mar 2024 14:54:03 +0000

1. How do you handle error boundaries in React?

Error boundaries in React are a way to catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Here's an example of how you can define an error boundary:


class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

You can use it as a regular component:


<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

In the above example, if MyComponent or any of its children throw an error during rendering, the error will be caught by the ErrorBoundary, the fallback UI will be rendered, and the error will be logged.

Please note that error boundaries only catch errors in the components below them in the tree. An error boundary can’t catch an error within itself.

2. What is the use of refs in React?

Refs in React are used to access and interact with DOM nodes or React elements directly. They are used in cases where you need to imperatively modify a child outside of the typical data flow. Here are a few common use cases for refs:

Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.

In functional components, refs are used with the useRef hook. Here's an example of how to use refs to manage focus on an input element in a functional component:


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

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    myRef.current.focus();
  }, []);

  return <input ref={myRef} />;
}

In this example, myRef is a reference to the DOM node rendered by the <input /> element, so it can be used to access the properties and methods of this node.

It's important to note that you should avoid using refs for anything that can be done declaratively. For example, instead of using a ref to expose text content of a <span>, you should pass it as a prop.

3. How do you manage side effects in React?

In React, side effects are managed using a built-in hook called useEffect. Side effects are operations that can affect other components and can't be done during rendering. These include data fetching, subscriptions, or manually changing the DOM.

The useEffect hook accepts two arguments: a function where you can perform your side effects, and an array of dependencies. The function will run after the render is committed to the screen.

If you pass an empty array ([]) as the second argument, the side effect runs once after the initial render, similar to componentDidMount in class components. If you pass variables in the array, the side effect will run whenever any of those variables change, similar to componentDidUpdate.

Here's an example of using useEffect to fetch data from an API:


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

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array means this effect runs once after initial render

  return (
    <div>
      {data ? `Data: ${data}` : 'Loading...'}
    </div>
  );
}

In this example, the useEffect hook fetches data from an API and updates the component's state with the fetched data. The empty array ([]) means the data fetching happens once after the component mounts.

4. What is the difference between a controlled component and an uncontrolled component?

In React, the terms "controlled" and "uncontrolled" components refer to the way data is managed in form elements.

Controlled Components: Controlled components are components where form data is controlled by React state. Any changes to the input field are handled by functions within the component, which means that the form data is directly controlled by the React component. The value of the input field is always driven by the state in the component. Here's an example:


import React, { useState } from 'react';

function MyForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + value);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

export default MyForm;

Uncontrolled Components: Uncontrolled components are components where form data is handled by the DOM itself rather than React state. Instead of writing an event handler for every state update, you can use a ref to get form values from the DOM. The value of the input field is thus controlled by the DOM itself, not by the React component. Here's an example:


import React from 'react';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.inputRef.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.inputRef} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default MyForm;

In general, it's recommended to use controlled components because they allow for more predictable code and are more in line with the "React way" of doing things, which is to keep state in the React component's state and render it declaratively. However, uncontrolled components can be useful for some types of inputs, like file uploads, or for integrating with non-React code.

5. How do you test React components?

Testing React components can be done using several libraries and tools. Here are some of the most commonly used ones:

Jest: Jest is a JavaScript testing framework developed by Facebook. It's great for testing JavaScript and React code. It works out of the box with minimal configuration and has features like a complete and easy-to-use API, mocking support, and a powerful matcher library.
React Testing Library: This is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: "The more your tests resemble the way your software is used, the more confidence they can give you."
Enzyme: Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output. Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

Here's an example of how you might test a simple React component using Jest and React Testing Library:


import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from '../Button'; // This is the component to be tested

test('Check button click updates the count', () => {
  const { getByText } = render(<Button />);

  // Button initially starts with "Times clicked: 0"
  expect(getByText('Times clicked: 0')).toBeInTheDocument();

  // Simulate a button click
  fireEvent.click(getByText('Click me'));

  // Expect the button text to have changed after click
  expect(getByText('Times clicked: 1')).toBeInTheDocument();
});

In this example, we're rendering the Button component and then checking that the initial button text is as expected. We then simulate a button click and check that the button text updates as expected.

Remember, testing is a vast topic and the approach you take will depend on many factors such as the complexity of the component, whether it's a class or functional component, whether it uses state or props, etc.

6. What is prop drilling in React?

Prop drilling is a term used in the React community to refer to the process of getting data to parts of the React Component tree. This involves passing props down from a parent component to its child components, and then further down to their children, and so on. This can become particularly problematic when the tree depth increases, as components in between that don't need the data still need to be passed the props to provide it to components deeper in the tree.

This is not an issue with small applications or components, but it can become cumbersome in larger applications. It can lead to code that is hard to maintain and understand. To avoid prop drilling, you can use state management solutions like Redux, MobX or React's built-in Context API. These solutions allow you to manage and access state from any component without having to pass props down through intermediate components.

7. What are Custom Hooks?

Custom Hooks are a feature in React that allow you to create your own hooks to reuse stateful behavior between different components. Custom Hooks are JavaScript functions whose names are prefixed with the word 'use'. A custom Hook is a normal function which can use other Hooks inside of it.

The purpose of custom Hooks is to allow you to use component logic into reusable functions. For example, you might want to use the same data fetching logic in multiple components. With custom Hooks, you can extract this logic into a reusable function.

Here's an example of a custom Hook:


import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      setLoading(false);
    }
    fetchData();
  }, [url]);

  return { data, loading };
}

export default useFetch;

In this example, useFetch is a custom Hook that fetches data from a URL. It uses the useState and useEffect Hooks internally. You can use it in your components like this:


import React from 'react';
import useFetch from './useFetch';

function MyComponent() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) {
    return 'Loading...';
  }

  return <div>Data: {data}</div>;
}

In this component, we're using the useFetch custom Hook to fetch data from an API. The useFetch Hook returns an object with data and loading properties, which we can use in our component to render different content based on whether the data is still loading.

8. Explain Strict Mode in React.

StrictMode is a tool for highlighting potential problems in an application. It does not render any visible UI. It activates additional checks and warnings for its descendants.

StrictMode currently helps with:

Identifying components with unsafe lifecycles
Warning about legacy string ref API usage
Warning about deprecated findDOMNode usage
Detecting unexpected side effects
Detecting legacy context API

To use the StrictMode, you just need to wrap your component with it. Here is an example:


import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

In the above example, the StrictMode checks will apply to ComponentOne and ComponentTwo components but not Header and Footer components.

Please note that StrictMode checks are only run in development mode; they do not impact the production build.

9. How to prevent re-renders in React?

There are several ways to prevent unnecessary re-renders in React:

ShouldComponentUpdate: This lifecycle method can be used in class components. It allows you to control whether a component should re-render or not by returning a boolean value. If shouldComponentUpdate returns false, then the component will not re-render.


shouldComponentUpdate(nextProps, nextState) {
  // compare with current props and state
  return nextProps.id !== this.props.id;
}

React.PureComponent: PureComponent is similar to Component, but it handles the shouldComponentUpdate method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state. If nothing has changed, it will not trigger a re-render.


class MyComponent extends React.PureComponent {
  // your component code
}

React.memo: React.memo is a higher order component. It's similar to React.PureComponent but for function components instead of classes. React.memo will do a shallow comparison of props and prevent re-render if props haven't changed.


const MyComponent = React.memo(function MyComponent(props) {
  // your component code
});

useMemo Hook: The useMemo hook allows you to prevent expensive calculations on every render. It returns a memoized version of the function that only re-computes the result when one of the dependencies has changed.


const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback Hook: The useCallback hook returns a memoized version of the callback function that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.


const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Remember, preventing re-renders can optimize your app, but it also adds complexity. So, use these techniques wisely and only when necessary.

10. How to re-render the view when the browser is resized?

In React, you can use the window object's resize event to trigger a re-render when the browser is resized. However, directly manipulating the DOM or using events like this is not the React way of doing things. Instead, you can use the useState and useEffect hooks to create a custom hook that listens for resize events. Here's an example:


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

// Custom hook
function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // Call handler right away so state gets updated with initial window size
    handleResize();

    // Remove event listener on cleanup
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Empty array ensures that effect is only run on mount and unmount

  return windowSize;
}

function ExampleComponent() {
  const size = useWindowSize();

  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
}

In this example, useWindowSize is a custom hook that listens for the resize event on the window object. When the window is resized, it updates the state, which causes a re-render of any component using this hook. The ExampleComponent uses this hook and will re-render whenever the window size changes.

Most Commonly Asked React Interview Questions 2024 - Part 2

Sayuj Sehgal — Fri, 15 Mar 2024 09:23:29 +0000

1. Explain the lifecycle methods in React?

Lifecycle methods in React are special methods that automatically get called as part of the lifecycle of a component. They allow you to control what happens when a component mounts, updates, or unmounts. These methods are only available in class components. However, with the introduction of Hooks in React 16.8, you can mimic their behavior in functional components.

Here are the most commonly used lifecycle methods:

constructor(props): This is the method where you initialize state and bind methods. It's called before the component is mounted.
componentDidMount(): This method is called once the component has been mounted to the DOM. It's a good place to make network requests or set up subscriptions.
shouldComponentUpdate(nextProps, nextState): This method is called before a re-render and can be used to optimize performance by preventing unnecessary re-renders. It should return a boolean value.
render(): This is the only required method in a class component. It should return JSX.
componentDidUpdate(prevProps, prevState): This method is called after the component updates. It's a good place to perform operations that need the updated state or props.
componentWillUnmount(): This method is called before the component is unmounted and destroyed. It's a good place to clean up any ongoing processes like network requests or timers.

Here's an example of a class component with lifecycle methods:


import React from 'react';

class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Only update if the count has changed
    return nextState.count !== this.state.count;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default MyClassComponent;

In functional components, you can use the useEffect Hook to mimic the behavior of componentDidMount, componentDidUpdate, and componentWillUnmount. Here's an example:


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

function MyFunctionalComponent(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component mounted/updated');

    return () => {
      console.log('Component will unmount');
    };
  }, [count]); // Only re-run the effect if count changes

  return <h1>Hello, {props.name}</h1>;
}

export default MyFunctionalComponent;

2. How do you handle state in React? What is the difference between state and props?

In React, state is a built-in object that contains data that may change over the lifetime of the component. State is managed within the component (local state), and when it changes, the component re-renders.

In class components, you initialize state in the constructor and update it using the setState method. Here's an example:


class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.incrementCount}>
          Click me
        </button>
      </div>
    );
  }
}

In functional components, you can use the useState Hook to add state. useState returns a pair: the current state value and a function that lets you update it. Here's an example:


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Props (short for properties) are read-only and allow you to pass data from a parent component down to a child component. They are similar to function parameters. Here's an example:


function ChildComponent(props) {
  return <h1>Hello, {props.name}</h1>;
}

function ParentComponent() {
  return <ChildComponent name="John" />;
}

The main differences between state and props are:

State is mutable and managed within the component, while props are read-only and passed from a parent component.
State changes can cause re-renders, while changes in props cause a re-render of the component and all its child components.
State is used when a component has data that changes over time, while props allow components to use and share data with other components.

3. What is Redux? How does it work with React?

Redux is a predictable state container for JavaScript applications. It's commonly used with React, but it can be used with any other JavaScript framework or library. It is used for managing the state of your application.

Redux maintains the state of an entire application in a single immutable state tree (object), which can't be changed directly. When something changes, a new object is created (using actions and reducers).

Here's a brief overview of how Redux works:

Actions: Actions are plain JavaScript objects that have a 'type' field. They are the only way you can send data from your application to your Redux store. The 'type' field should be a string that gives this action a name, like 'USER_CLICKED_SUBMIT'. Actions usually have two properties: 'type' and 'payload'. The 'payload' is the data that you want to store in the state.
Reducers: Reducers are functions that take the current state of the application and an action, then return a new state. They are pure functions, meaning they don't modify the input, don't produce side effects, and given the same input, will always produce the same output.
Store: The Store is the object that brings Actions and Reducers together. The store has several responsibilities: holds application state, allows access to state via getState(), allows state to be updated via dispatch(action), registers listeners via subscribe(listener), and handles unregistering of listeners via the function returned by subscribe(listener).

In a React-Redux app, you'll also deal with the following:

Provider: The <Provider /> makes the Redux store available to any nested components that have been wrapped in the connect() function.
Connect: The connect() function connects a React component to the Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.

Redux is not always necessary and can add complexity to your application. It's best used in larger applications where multiple components need access to the same slices of state, or in situations where state needs to be managed in a more predictable way.

4. How do you handle forms in React?

In React, you can handle forms by creating controlled components. A controlled component is a component where React is in control of the form data. In a controlled component, the form data is handled by the state within the component.

Here's a simple example of a controlled component:


import React from 'react';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default MyForm;

In this example, the form data is stored in the component's state and updated in real-time as the user types into the form field. The handleChange method is called every time the input field changes, updating the state with the new value. The handleSubmit method is called when the form is submitted.

For functional components, you can use the useState hook to manage form state:


import React, { useState } from 'react';

function MyForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + value);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

export default MyForm;

In this functional component, the useState hook is used to manage the form state. The handleChange and handleSubmit functions work the same way as in the class component example.

5. What are higher-order components? Can you give an example?

Higher-order components (HOCs) in React are a pattern derived from React's compositional nature. HOCs are a function that takes a component and returns a new component with additional props or behaviors. They are a way to reuse component logic, and can be thought of as parameterized container components.

Here's a simple example of a higher-order component:


// A higher-order component that injects props into a component
function withExtraProps(WrappedComponent, extraProps) {
  return function(props) {
    return <WrappedComponent {...props} {...extraProps} />;
  };
}

// Usage
function MyComponent(props) {
  return <div>{props.message}</div>;
}

const MyComponentWithExtraProps = withExtraProps(MyComponent, { message: 'Hello, world!' });

// Now <MyComponentWithExtraProps /> will render 'Hello, world!'

In this example, withExtraProps is a higher-order component. It's a function that takes a component (WrappedComponent) and some extraProps, and returns a new component that renders the WrappedComponent with its original props and the extraProps merged together.

This is a very simple example. In practice, HOCs can be used for a variety of tasks, such as connecting a component to a Redux store, adding lifecycle methods to a functional component, handling context, etc.

6. How do you handle routing in React?

In React, routing is handled by a library called React Router. React Router is a collection of navigational components that compose declaratively with your application. It keeps your UI in sync with the URL.

Here's a basic example of how to use React Router:

First, you need to install it using npm or yarn:


npm install react-router-dom


yarn add react-router-dom

Then, you can use it in your app:


import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import NotFoundPage from './NotFoundPage';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </Router>
  );
}

export default App;

In this example, BrowserRouter is a component that uses the HTML5 history API to keep your UI in sync with the URL. Route is a component that renders some UI when its path matches the current URL. Switch is used to render only the first Route or Redirect that matches the location.

When the URL is "/", HomePage component will be rendered. When the URL is "/about", AboutPage component will be rendered. If the URL does not match any of the paths defined in the Route components, the NotFoundPage component will be rendered.

7. How do you optimize performance in a React application?

Optimizing performance in a React application can be achieved through several strategies:

Use the Production Build: React includes a development build with helpful warnings. However, it is slower and larger than the production build. Always use the production build for the best performance in a live environment.
Virtualize Long Lists: If you are rendering long lists of data, the browser can slow down significantly. Libraries like react-window or react-virtualized can help by only rendering items that are currently visible.
Avoid Inline Function Definition in Render: Each time a component re-renders, a new function instance is created when you define a function inline in render. This can cause child components to re-render unnecessarily. Instead, define functions in the component class or use useCallback hook for functional components.
Use shouldComponentUpdate/PureComponent/Memo: These features allow you to prevent unnecessary re-renders when the props or state haven't changed. shouldComponentUpdate is a lifecycle method in class components, PureComponent is a class component that implements shouldComponentUpdate with a shallow prop and state comparison, and React.memo is a higher order component that does the same thing for functional components.
Lazy Loading: With React.lazy and Suspense, you can easily code-split and lazy-load different parts of your application to reduce the initial load time.
Optimize Images: Use optimized, compressed images and consider using a CDN for serving images.
Use Keys in Lists: When rendering lists, always use keys. Keys help React identify which items have changed, are added, or are removed and help in efficient re-renders.
Debounce or Throttle High-Frequency Functions: Functions like event handlers that get triggered often can be debounced or throttled to prevent excessive function calls.
Use the Profiler in React DevTools: This tool can help you identify performance bottlenecks in your application.
Immutable Data Structures: Using libraries like Immutable.js can help optimize performance by reducing the complexity of tracking changes and determining when re-renders are necessary.

Remember, premature optimization can lead to unnecessary complexity. Always measure and understand where the real performance bottlenecks are before optimizing.

8. What is context in React? How do you use it?

Context in React provides a way to pass data through the component tree without having to pass props down manually at every level. It's designed to share data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language.

To use Context in React, you need to follow these steps:

Create a Context: First, you need to create a Context object. This is done using React.createContext(defaultValue). The defaultValue argument is only used when a component does not have a matching Provider above it in the tree.


const MyContext = React.createContext(defaultValue);

Provide a Context value: For the context to be accessible to components, it needs to have a Context Provider. This is done using <MyContext.Provider value={/* some value */}>. All components nested inside it will have access to the provided value.


<MyContext.Provider value={/* some value */}>
  {/* children */}
</MyContext.Provider>

Consume the Context value: Any nested component can access the Context value without it being passed explicitly. This is done using the Context Consumer. There are two ways to consume a Context:

Using <MyContext.Consumer>:


<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

Using the useContext() hook:


const value = React.useContext(MyContext);

Here's a simple example of using Context:


import React from 'react';

// Create a Context
const NumberContext = React.createContext();

// It returns a Provider and Consumer 
function App() {
  return (
    <NumberContext.Provider value={42}>
      <div>
        <Display />
      </div>
    </NumberContext.Provider>
  );
}

function Display() {
  // Use the Consumer to grab the value from context
  // Notice this component didn't get any props!
  return (
    <NumberContext.Consumer>
      {value => <div>The answer is {value}.</div>}
    </NumberContext.Consumer>
  );
}

export default App;

In this example, the Display component can access the value from the NumberContext without it being passed as a prop. It's getting it directly from the context.

9. How keys work in React? Why are they important?

Keys in React are used to identify unique VDOM elements (the elements in the "virtual DOM", which is a light-weight copy of the actual DOM). They are important for performance reasons when rendering dynamic children, or multiple children in an array or iterator.

When React renders array elements, it needs a way to keep track of each element. If the state changes, React needs to determine what has changed in order to efficiently update and re-render components. Keys help React identify which items have changed, are added, or are removed.

For example, if you have a list of items:


const todoItems = todos.map((todo) =>
  <li>{todo.text}</li>
);

React doesn't have a way to identify each element uniquely. So, you should provide a key attribute:


const todoItems = todos.map((todo) =>
  <li key={todo.id}>{todo.text}</li>
);

Now, each element has a unique key (todo.id in this case), and React can identify it even after state changes.

It's important to note that keys should be stable, predictable, and unique for each element. Using the array index as a key is not recommended if the list can reorder, as this can negatively impact performance and may cause issues with the component state.

10. What are React Fragments?

React Fragments are a common pattern in React for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

Here's an example of how you can use React Fragments:


import React, { Fragment } from 'react';

function Example() {
  return (
    <Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </Fragment>
  )
}

In this example, ChildA, ChildB, and ChildC are sibling components that are being returned by the Example component. Without a Fragment, you would have to wrap them in a parent div or other element, which might mess up your CSS or HTML structure.

You can also use a shorter syntax, but this doesn't support keys or attributes:


import React from 'react';

function Example() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  )
}

In this case, <> and </> are shorthand for <React.Fragment> and </React.Fragment>.

Most Commonly Asked React Interview Questions 2024 - Part 1

Sayuj Sehgal — Fri, 15 Mar 2024 04:00:17 +0000

1. What is React? Why is it used?

React is a popular JavaScript library for building user interfaces, particularly single-page applications where you need a fast, interactive user experience. It was developed by Facebook and is now maintained by Facebook and a community of individual developers and companies.

React allows developers to create large web applications that can update and render efficiently in response to data changes, without requiring a page reload. It does this by using a virtual DOM (Document Object Model) and only updating the parts of the page that changed, rather than the entire page. This makes it highly performant.

React also introduces a component-based architecture. This means you build encapsulated components that manage their own state, then compose them to make complex UIs. Each component is a piece of UI and can be reused wherever you need it. This leads to cleaner and more modular code, which is easier to maintain and test.

React is used for its efficiency, flexibility, and simplicity. It's efficient because it only updates the necessary parts of the UI and doesn't waste time re-rendering components that haven't changed. It's flexible because it allows you to create your own components and use them however you like. And it's simple because it uses JavaScript syntax extension (JSX), which allows you to write HTML-like syntax in your JavaScript code, making it easier to understand and write.

React is used by many large companies including Facebook, Instagram, Airbnb, Netflix, WhatsApp, and more. It's also widely used in startups and other web-based businesses.

2. Explain the difference between a class component and a functional component?

In React, you can define components in two ways: as Class components or as Functional components. Here are the main differences between the two:

Class Components:
- Class components are ES6 classes that extend from React.Component.
- They must have a render method which returns JSX.
- They can have state (i.e., mutable data) and lifecycle methods (like componentDidMount, componentDidUpdate, and componentWillUnmount).
- They are more verbose than functional components.
- Here's an example of a class component:


import React from 'react';

class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default MyClassComponent;

Functional Components:
- Functional components are simply JavaScript functions that return JSX.
- They do not have their own state or lifecycle methods. However, with the introduction of Hooks in React 16.8, you can now use state and lifecycle features in functional components.
- They are less verbose and easier to read and test.
- Here's an example of a functional component:


import React from 'react';

const MyFunctionalComponent = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

export default MyFunctionalComponent;

In modern React development, functional components are preferred due to their simplicity and the introduction of Hooks, which allow you to use state and other React features without writing a class.

3. What are the main differences in syntax between class components and functional components?

The main differences in syntax between class components and functional components in React are as follows:

Class Components:

Class components are ES6 classes. They must have a render method which returns JSX.
They have a more complex syntax due to the need for a constructor to initialize state and the requirement of this keyword for handling events and accessing props and state.
Here's an example of a class component:


import React from 'react';

class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default MyClassComponent;

Functional Components:

Functional components are simply JavaScript functions that return JSX.
They have a simpler syntax and are easier to read and test.
Here's an example of a functional component:


import React from 'react';

const MyFunctionalComponent = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

export default MyFunctionalComponent;

4. How do class components handle state compared to functional components?

Class components have a built-in state object that can be initialized in the constructor and updated with this.setState().
Functional components, prior to React 16.8, were stateless. However, with the introduction of Hooks, functional components can now use state via the useState Hook.

5. Can you explain the role of lifecycle methods in class components and how they differ from functional components?

Class components have lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount which allow you to run code at specific points in the component's lifecycle.
Functional components do not have lifecycle methods. However, the useEffect Hook in functional components can replicate the behavior of these lifecycle methods.

6. How does the introduction of Hooks impact the usage of state and lifecycle features in functional components?

Hooks are a new addition in React 16.8 that let you use state and other React features without writing a class.
The useState Hook lets you add state to functional components, and the useEffect Hook lets you perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.
Hooks do not work inside classes — they let you use React without classes.

7. What are React hooks? Can you give some examples of how to use them?

React Hooks are a feature introduced in React 16.8 that allow you to use state and other React features without writing a class. They are functions that let you "hook into" React state and lifecycle features from functional components.

Here are some of the most commonly used hooks:

useState: This hook lets you add React state to functional components.


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

In this example, useState is called with the initial state. It returns a pair of values: the current state and a function that updates it. This is why we write const [count, setCount] = useState(0). This is similar to this.state.count and this.setState in a class, except you get them in a pair.

useEffect: This hook lets you perform side effects in functional components. It is a close replacement for componentDidMount, componentDidUpdate, and componentWillUnmount.


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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example;

In this example, the useEffect hook is used to update the document title after React updates the DOM. The effect hook runs when the component mounts and also when it updates.

useContext: This hook lets you subscribe to React context without introducing nesting.


import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

export default ThemedButton;

In this example, the useContext hook is used to consume a context value from the nearest ThemeContext.Provider up the tree from this component. This is a simpler way to consume context compared to the Context.Consumer component or the contextType class property.

Remember, hooks are only available in functional components. They cannot be used in class components.

8. What is JSX? How is it different from HTML and JavaScript?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript, developed by Facebook, and is used with React to describe what the UI should look like. JSX produces React "elements" and has a syntax very similar to HTML.

Here are some key points about JSX:

JSX is not HTML nor JavaScript, but it is very similar: JSX looks a lot like HTML and can be written within JavaScript code. However, it's not exactly either of the two. It's a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files.
JSX is an Expression: After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions.
JSX Attributes & Expressions: You can use quotes to specify string literals as attributes in JSX, or you can use curly braces to embed a JavaScript expression in an attribute. You can also embed JavaScript expressions in JSX using curly braces, excluding statements and flow control.
JSX Prevents Injection Attacks: It is safe to embed user input in JSX because React DOM escapes any values embedded in JSX before rendering them. This ensures that you can never inject anything that's not explicitly written in your application.
JSX Represents Objects: Babel compiles JSX down to React.createElement() calls, which means that a JSX tag is just syntactic sugar for calling React.createElement(component, props, ...children).

Here's an example of JSX in a functional component:


function HelloComponent() {
  return <h1>Hello, world!</h1>;
}

Differences between JSX, HTML, and JavaScript:

JSX vs HTML: While JSX may look like HTML, there are some key differences. For example, because JSX is JavaScript, you can't use JavaScript reserved words. This is why class becomes className in JSX. Also, since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, tabindex in HTML becomes tabIndex in JSX.
JSX vs JavaScript: JSX is an extension to JavaScript, not a separate language. It's a way to write HTML-like code in your JavaScript files, but under the hood, it's all JavaScript. JSX code is transformed into regular JavaScript calls to React.createElement() before it reaches the browser.

What is the virtual DOM in React?

The Virtual DOM (VDOM) is a key feature of React that allows it to be highly performant and efficient. It's a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called reconciliation.

Here's how it works:

When a component's state changes, a new virtual DOM tree is created. This tree is a representation of what the UI will look like after the state change.
React then compares this new virtual DOM tree with the old one (the one representing the current UI).
Through a process called "diffing", React identifies the differences between the new and old virtual DOM.
Once the differences are identified, React updates only those objects in the real DOM that need to change to reflect the new state. This is called "patching".

This process is much faster than updating the entire DOM, which is what happens in traditional web page rendering. The virtual DOM allows React to minimize interactions with the actual DOM, which is slow to touch and manipulate. This leads to a smoother and faster user experience.

It's important to note that the virtual DOM isn't a feature of React alone. Other libraries and frameworks also use a similar concept to improve performance. However, React was one of the first to use it effectively on a large scale.

What is Reconciliation in React?

Reconciliation is a process in React that allows it to efficiently update the user interface. It's the algorithm behind what makes React fast. Here's how it works:

Render Phase: When a component's state or props change, React triggers a re-render. During this phase, React calls the render method and generates a new virtual DOM tree. This tree represents what the UI should look like after the state or props change.
Diffing Algorithm: React then compares this new virtual DOM tree with the old one (the one representing the current UI). This comparison is done using a diffing algorithm. The algorithm goes through both trees and identifies the differences.
Update Phase: Once the differences are identified, React proceeds to the update phase. In this phase, React updates only those objects in the real DOM that need to change to reflect the new state. This process is called "patching" or "committing updates".
Batching: React also batches multiple updates together to minimize the number of times it has to interact with the real DOM, which is a relatively slow operation.

This process allows React to be highly efficient, as it minimizes the number of manipulations with the real DOM, which is one of the slower operations in any web application. It also allows React to provide a smoother and faster user experience.

It's important to note that reconciliation is a heuristic algorithm, and its performance is linear (O(n)) where n is the number of elements in the tree. This makes it very efficient even for large applications.

Mastering useRef Hook in React: Unleashing the Power of References

Sayuj Sehgal — Thu, 14 Mar 2024 14:58:46 +0000

The useRef hook is a function in React that allows you to access and interact with elements in the DOM or mutable variables in your component. It returns a mutable ref object whose .current property is initialized with the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

Unlike useState, which re-renders the component when the state changes, useRef maintains its value between renders without causing re-renders. This makes it ideal for storing references to DOM elements, managing focus, implementing animations, and more.

Advantages:

It can be used to store a mutable variable that doesn't cause a re-render when it changes. This is useful for keeping track of intervals, timeouts, or any other information that should persist across renders but doesn't need to trigger an update.
It can be used to access DOM nodes directly, which is useful for managing focus, text selection, or media playback.

Disadvantages:

Overuse of useRef to manipulate the DOM directly can lead to spaghetti code, which is harder to maintain and reason about. It's generally better to use React's declarative style of programming when possible.
It doesn't trigger a re-render when the data changes. This can be an advantage in some cases, but it can also lead to bugs if you're not careful, as your UI won't automatically update to reflect changes in the ref's current value.

Here's an example of how you might use useRef:

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

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };

  useEffect(() => {
    // This would autofocus the input element on initial render
    inputEl.current.focus();
  }, []); // Empty array ensures that effect runs only once

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

export default TextInputWithFocusButton;

In this example, useRef is used to store a reference to an input element. The focus method is then called on this reference when the button is clicked, focusing the input element.

Conclusion

The useRef hook in React provides a powerful mechanism for managing references within functional components. Whether you're working with DOM elements, preserving values between renders, useRef offers a flexible and efficient solution. By understanding its capabilities and best practices, you can leverage useRef to streamline your React development workflow, enhance code readability, and build more sophisticated and interactive user interfaces.

Exploring the useEffect Hook in React: Managing Side Effects

Sayuj Sehgal — Wed, 13 Mar 2024 13:41:45 +0000

This hook is used to perform side effects in function components. Side effects could be data fetching, subscriptions, or manually changing the DOM.

useEffect takes two arguments: a function that contains the side-effect logic, and an array of dependencies. The function runs after the render is committed to the screen. If you pass an empty array ([]) as the second argument, the side effect runs once after the initial render, similar to componentDidMount in class components. If you pass a variable inside the array, the side effect runs whenever that variable changes.

Here is an example of how to use the useEffect hook:

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  }, [count]); // Only re-run the effect if count changes

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this example, the useEffect hook is used to update the document title whenever the count state changes. The count state is passed as a dependency to useEffect, so the effect only re-runs when count changes.

In React, "unmounting" refers to the process where a component is being removed from the DOM. This can happen when the parent component that renders the component conditionally decides not to render it, or when the user navigates away from the current page (in case of single-page apps).

The useEffect hook in React can be used to handle this unmounting process. Specifically, the function passed to useEffect can return a cleanup function. This cleanup function is executed right before the component is unmounted from the UI to prevent memory leaks.

Here's an example:

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timerID = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // Here's the cleanup function:
    return function cleanup() {
      clearInterval(timerID);
    };
  }, []); // Empty array means the effect runs once on mount and cleanup on unmount

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

In this example, the useEffect hook sets up an interval that increments the count state every second. The cleanup function returned by useEffect clears the interval, ensuring that if the Example component is ever unmounted, the interval won't continue to run and try to update state on an unmounted component, which would cause a memory leak.

Understanding the useState Hook in React: Simplifying State Management

Sayuj Sehgal — Wed, 13 Mar 2024 13:40:52 +0000

The useState hook is a built-in hook in React that allows you to add state to your functional components. It is a part of the Hooks API introduced in React 16.8.

The useState hook takes one argument, which is the initial state, and returns an array of two elements: the current state and a function to update it.

Here is an example of how to use the useState hook:

import React, { useState } from 'react';

function Counter() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this example, useState(0) declares a new state variable called count and initializes it to 0. The setCount function is used to update the state. When the user clicks the button, the onClick handler calls setCount with the new value, which triggers a re-render of the Counter component with the updated state.

There is also a second way to update the state in React using the useState hook that is setCount(prev => prev + 1). Here, setCount is the function returned by the useState hook that allows you to update the state.

The function setCount is being called with a function as its argument. This function takes the previous state (which we're calling prev) as its argument and returns the new state. In this case, the new state is the previous state plus one (prev + 1).

This is particularly important when the new state depends on the previous state. React may batch multiple setCount calls into a single update for performance reasons. This means that, when the next state depends on the previous one, you could potentially be reading a state that is out-of-date if you do not use a function to update the state.

By passing a function (prev => prev + 1) to setCount, you are ensuring that React will always apply the state update with the most recent version of the state.

React 19: New Features and Upcoming Major Releases in 2024

Sayuj Sehgal — Wed, 13 Mar 2024 04:44:18 +0000

Get ready, ReactJS enthusiasts! In this post, we’ll talk about the latest and coolest things happening in ReactJS that are about to change how we create user interfaces.

React Compiler:

No longer a research project, the compiler now powers Instagram in production.
Team aims to ship the compiler to other Meta surfaces and prepare for open-source release.
The compiler aims to eliminate the need for manual memoization by automatically optimizing re-renders based on state changes.
The compiler adheres to strict React rules to ensure safe and predictable code transformations.

Actions:

Actions offer a unified way to handle data submissions from client to server.
Define actions on the client or server with use client and use server directives.
Access form state and response with useFormStatus and useFormState.
Utilize useOptimistic for temporary UI updates while data is processed.
Actions are available in the React Canary channel and will be released soon.

New Features in React Canary:

React Server Components (RSC): Render components directly on the server for SEO and performance benefits.
Asset Loading: Suspense now handles loading of stylesheets, fonts, and scripts.
Document Metadata: Built-in support for rendering
, , and tags.
These features are ready for production use in Canary, but will be part of React 19 due to their interdependence.

The Next Major Version of React:

React 19 is coming! Includes all the features mentioned above, plus long-awaited improvements like Web Components support.
Breaking changes are expected due to new features like Asset Loading.
More information and release timeline coming soon.

Activity (formerly Offscreen):

Research on a feature for managing active and inactive parts of the UI.
Temporarily deprioritized while focusing on other features.

Key points summarized:

React Compiler is moving towards open source and production use.
Actions simplify data handling and form management.
React Canary offers early access to new features like RSC and Asset Loading.
React 19 brings major improvements and breaking changes.
Activity research continues, focusing on other features first.

Thanks for being part of this read, and for more updates you can join upcoming React Conf (May 15-16 2024).