React re-render

what is react re-render?
Re-render in react is a process where components update its output to the dom in response in response to change state and props.
React में Re-rendering का मतलब है जब कोई component अपने state या props में बदलाव होने पर दोबारा DOM (User Interface) को अपडेट करता है।

सीधे शब्दों में कहें तो:

जब React component के अंदर कुछ बदलता है — जैसे कि कोई बटन क्लिक हुआ, कोई इनपुट डाला गया, या बाहर से नया डेटा आया — तो React उस component को फिर से render करता है, ताकि UI में वो बदलाव दिख सके।

This process involves calling the component's render method again to produce a new virtual DOM, which is then compared to the previous virtual DOM to determine the minimal set of changes needed to update the actual DOM.

When does re-rendering occur?

Re-rendering occurs in the following scenarios:

• When a component's state changes using setState

• When a component receives new props from its parent component

• When the parent component re-renders, causing its child components to re-render as well

  The re-rendering process

• State or props change: When a component's state or props change, React schedules a re-render for that component.

• Render method: React calls the component's render method to generate a new virtual DOM tree.

• Virtual DOM comparison: React compares the new virtual DOM tree with the previous one using a diffing algorithm.

• DOM updates: React calculates the minimal set of changes required and updates the actual DOM accordingly.
  Performance considerations

  Re-rendering can be expensive, especially for complex components or large applications. To optimize performance, React provides several techniques:

  • PureComponent: A base class that implements a shallow comparison of props and state to prevent unnecessary re-renders.

  • React.memo: A higher-order component that memoizes the result of a component's render to avoid re-rendering if the props haven't changed.

  • useMemo and useCallback: Hooks that memoize values and functions to prevent unnecessary re-renders.

• 🔄 Re-render Example in React

    import React, { useState } from 'react';
  
    function ChildComponent({ name }) {
      console.log('🔁 ChildComponent re-rendered');
      return <h2>Hello, {name}!</h2>;
    }
  
    function App() {
      const [count, setCount] = useState(0);
      const [name, setName] = useState('Priyanka');
  
      return (
        <div>
          <h1>React Re-render Example</h1>
  
          <ChildComponent name={name} />
  
          <button onClick={() => setCount(count + 1)}>
            Increment Count ({count})
          </button>
  
          <button onClick={() => setName(name === 'Priyanka' ? 'Kumari' : 'Priyanka')}>
            Change Name
          </button>
        </div>
      );
    }
  
    export default App;