What is use Effect Hook in React Js? Overview

What is React js?

React js is a powerful Javascript library used for building user interfaces (Uis) developed by Facebook. Because of React’s efficiency, flexibilty and robust ecosystem React js has become immensely popular for creating interactive and dynamic web pages. React allows developer to build reusable components of UI, manage its state efficiently and create complex user interface.

React has component based architecture where UIs are divided into reusable components. These components consist their own logic and state which makes it easier for developers to build and maintain large-scale applications. React also gives one more rich feature which is Virtual DOM for optimizing performance by making all changes to virtual DOM instead of brower’s DOM. React creates a lightweight representation of the DOM in the memory. When component’s state is changed, it efficiently updates the virtual DOM and then reconciles it with the browser’s DOM.

Also check :

https://www.linuxcoder.in/blogs/programming/an-introduction-to-node-js-powering-the-web-with-javascript/

To start building applications with React, you’ll need to set up a development environment with Node.js and npm (Node Package Manager). You can then create a new React project using tools like Create React App, which sets up a development environment with all the necessary dependencies and configurations.

UseEffect Hook in React JS

The useEffect hook is a fundamental feature of react js. It helps perform side effects in functions components. Some of the examples in which useEffect hook plays a major role are Data fetching, setting up a subscription, manually changing the DOM in react components etc.

What does useEffect hook do ?

By using this hook React knows that your component needs to do something after render. React will remember the function you passed and call it later after the dom has been rendered . For eg. Let’s call useEffect hook on table component by telling react to fetch data from API after the table has been loaded or fetch the data when clicked somewhere in the table.

useEffect(() => {
  // This effect runs after every render
  // Perform side effects here
  
  // Return a cleanup function
  return () => {
    // Cleanup tasks here
  };
});

Overall, the useEffect hook provides a clean and concise way to handle side effects in React functional components, improving code readability and maintainability.