Memory

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


function ParentComponent() {

  const [clickCount, setClickCount] = useState(0); // Changes on every button click

  const [otherValue, setOtherValue] = useState(0); // Changes only when its button is clicked


  // This function will always be recreated because 'clickCount' changes on every click

  const incrementClickCount = useCallback(() => {

    console.log('incrementClickCount called. Current clickCount:', clickCount);

    setClickCount(prevCount => prevCount + 1);

  }, [clickCount]); // Dependency: clickCount


  // This function will only be recreated if 'otherValue' changes

  // It demonstrates how useCallback *prevents* recreation when 'clickCount' changes

  const updateOtherValue = useCallback(() => {

    console.log('updateOtherValue called. Current otherValue:', otherValue);

    setOtherValue(prevValue => prevValue + 1);

  }, [otherValue]); // Dependency: otherValue


  // This is a plain function, always recreated

  const logParentRender = () => {

    console.log('ParentComponent rendered');

  };

  logParentRender(); // Log every parent render


  return (

    <div>

      <h1>Parent Component</h1>

      <p>Click Count: {clickCount}</p>

      <p>Other Value: {otherValue}</p>


      {/* This button will cause `incrementClickCount` to be recreated each time */}

      <button onClick={incrementClickCount}>

        Increment Click Count (useCallback with changing dependency)

      </button>


      {/* This button will cause `updateOtherValue` to be recreated each time *it* is clicked.

          However, if you click the 'Increment Click Count' button, `updateOtherValue`

          will NOT be recreated, demonstrating the memoization benefit. */}

      <button onClick={updateOtherValue}>

        Update Other Value (useCallback with its own changing dependency)

      </button>


      {/* Imagine a child component here, wrapped in React.memo */}

      <MemoizedChildComponent

        onIncrement={incrementClickCount} // Recreates on every clickCount change

        onUpdateOther={updateOtherValue} // Only recreates on otherValue change

      />

    </div>

  );

}


// Child component wrapped with React.memo to show memoization benefits

const MemoizedChildComponent = React.memo(({ onIncrement, onUpdateOther }) => {

  console.log('MemoizedChildComponent rendered'); // This will log less often


  return (

    <div style={{ border: '1px dashed blue', padding: '10px', marginTop: '15px' }}>

      <h2>Memoized Child Component</h2>

      <button onClick={onIncrement}>Child: Increment Click Count</button>

      <button onClick={onUpdateOther}>Child: Update Other Value</button>

      <p>Check console logs for render messa

ges.</p>

    </div>

  );

});


export default ParentComponent;

Comments

Post a Comment

Popular posts from this blog

React-imp

Image
1. What is ReatcJS and How does it Work? 1. What is ReactJS and How does it Work? ReactJS is a powerful JavaScript library to create interactive user interfaces with building blocks. ReactJS  operates on the principles of a declarative approach, where you specify what you want the UI to look like , and a component-based approach, where reusable pieces (components) are combined to build complex interfaces . It operates on the principle of  declarative and component-based approach . These components are small, self-contained units that can be composed together to build complex user interfaces. When a React application is run, it creates a virtual representation of the user interface in memory, known as the virtual DOM.  The Virtual DOM is a lightweight JavaScript object  that contains all the properties and attributes of the actual DOM elements. It’s a programming concept that keeps an ideal representation of a UI in memory and  syncs it with the actual DOM. W...
Read more

JS rawat

Image
Chapters-Covered Q1: what is javascript? What is the role of javascript engine? Q2: what are client side and server side? Q3: what are variables? What is the difference between var,let and const? Q4: what are some important string operations in js? Q5: What is DOM? What is the difference between HTML and DOM? Q6: What are selectors in JS? ers Q7: What is the difference between getElementById,getElementByClassName and getElementByTagName? Q8: What are data types in JS? Q9: What are operations? What are the types of operators in JS? Q10: What are the types of conditions statements in JS? Q11: What is loop? What are the types of loops in JS? Q12: What are Functions in JS? What are the types of function? Q13: What are Arrow Functions in JS? What is it use? Q14: What are Arrays in JS? How to get, add & remove elements from arrays? ...
Read more
The details element Q1.What is ReatcJS and How does it Work? ### Virtual DOM Creation When a React application runs, it creates a virtual representation of the user interface called the virtual DOM (VDOM). This virtual DOM is a lightweight JavaScript object that mirrors the structure and properties of the actual DOM elements in memory. ### State and Props Changes When the state or props of a React component change, React: 1. Creates a New VDOM Tree: - React creates a new virtual DOM tree that represents the updated state or props of the component. ### Diffing Algorithm (Reconciliation) React uses a diffing algorithm , often called the reconciliation algorithm, to compare the new virtual DOM tree with the previous one. This algorithm identifies the differences between the two trees, determining what has changed. ### Efficient Updates Once React identifies the changes: 1. Calculates Differences: - It calculates the minimal set of updates needed to tra...
Read more