প্রতিক্রিয়া ব্যবহার করুনএফেক্ট হুক প্রাথমিক রেন্ডারে চালিত হয় না

Question 1

ডক্স অনুসারে:

componentDidUpdate()আপডেট হওয়ার সাথে সাথেই অনুরোধ করা হয়। এই পদ্ধতিটি প্রাথমিক রেন্ডার জন্য ডাকা হয় না।

আমরা useEffect()অনুকরণ করতে নতুন হুক ব্যবহার করতে পারি componentDidUpdate(), তবে মনে useEffect()হয় প্রতিটি রেন্ডারের পরে এমনকি প্রথমবারের মতো এটি চলছে। আমি কীভাবে এটি প্রাথমিক রেন্ডারে না চালাতে পারি?

আপনি নীচের উদাহরণে দেখতে পাচ্ছেন, componentDidUpdateFunctionপ্রাথমিক রেন্ডার componentDidUpdateClassচলাকালীন মুদ্রিত হয় তবে প্রাথমিক রেন্ডার সময় মুদ্রিত হয়নি।

function ComponentDidUpdateFunction() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

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

  componentDidUpdate() {
    console.log("componentDidUpdateClass");
  }

  render() {
    return (
      <div>
        <p>componentDidUpdateClass: {this.state.count} times</p>
        <button
          onClick={() => {
            this.setState({ count: this.state.count + 1 });
          }}
        >
          Click Me
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <ComponentDidUpdateFunction />
    <ComponentDidUpdateClass />
  </div>,
  document.querySelector("#app")
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

স্নিপেট প্রসারিত করুন

Question 2

আমরা useRefআমাদের পছন্দ মতো কোনও পরিবর্তনীয় মান সংরক্ষণ করতে হুক ব্যবহার করতে পারি , তাই আমরা প্রথমবার useEffectফাংশনটি চালু হচ্ছে কিনা তা ট্র্যাক রাখতে এটি ব্যবহার করতে পারি ।

যদি আমরা প্রভাবটি একই ধাপে চালিত করতে চাই তবে componentDidUpdateআমরা তার useLayoutEffectপরিবর্তে ব্যবহার করতে পারি ।

উদাহরণ

const { useState, useRef, useLayoutEffect } = React;

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

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

ReactDOM.render(
  <ComponentDidUpdateFunction />,
  document.getElementById("app")
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

স্নিপেট প্রসারিত করুন

Question 3

আপনি এটিকে কাস্টম হুকগুলিতে রূপান্তর করতে পারেন:

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

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        if (didMount.current) func();
        else didMount.current = true;
    }, deps);
}

export default useDidMountEffect;

ব্যবহারের উদাহরণ:

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

import useDidMountEffect from '../path/to/useDidMountEffect';

const MyComponent = (props) => {    
    const [state, setState] = useState({
        key: false
    });    

    useEffect(() => {
        // you know what is this, don't you?
    }, []);

    useDidMountEffect(() => {
        // react please run me if 'key' changes, but not on initial render
    }, [state.key]);    

    return (
        <div>
             ...
        </div>
    );
}
// ...

Question 4

useFirstRenderফর্ম ইনপুটকে ফোকাস করার মতো কেসগুলি পরিচালনা করার জন্য আমি একটি সাধারণ হুক তৈরি করেছি :

import { useRef, useEffect } from 'react';

export function useFirstRender() {
  const firstRender = useRef(true);

  useEffect(() => {
    firstRender.current = false;
  }, []);

  return firstRender.current;
}

এটি শুরু হয়ে যায় true, তারপরে স্যুইচ falseকরে useEffect, যা কেবল একবার চালিত হয় এবং আর কখনও হয় না।

আপনার উপাদানগুলিতে, এটি ব্যবহার করুন:

const firstRender = useFirstRender();
const phoneNumberRef = useRef(null);

useEffect(() => {
  if (firstRender || errors.phoneNumber) {
    phoneNumberRef.current.focus();
  }
}, [firstRender, errors.phoneNumber]);

আপনার ক্ষেত্রে, আপনি কেবল ব্যবহার করতে হবে if (!firstRender) { ...।

Question 5

@ আরভি, আপনার পাস-ইন আনমাউন্ট ফাংশনটি কল করবেন না। এখানে আরও একটি সম্পূর্ণ সংস্করণ রয়েছে:

/**
 * Identical to React.useEffect, except that it never runs on mount. This is
 * the equivalent of the componentDidUpdate lifecycle function.
 *
 * @param {function:function} effect - A useEffect effect.
 * @param {array} [dependencies] - useEffect dependency list.
 */
export const useEffectExceptOnMount = (effect, dependencies) => {
  const mounted = React.useRef(false);
  React.useEffect(() => {
    if (mounted.current) {
      const unmount = effect();
      return () => unmount && unmount();
    } else {
      mounted.current = true;
    }
  }, dependencies);

  // Reset on unmount for the next mount.
  React.useEffect(() => {
    return () => mounted.current = false;
  }, []);
};

স্নিপেট প্রসারিত করুন

Question 6

@ মেহেদীদেহঘানি, আপনার সমাধানটি পুরোপুরি সূক্ষ্মভাবে কাজ করবে, আপনাকে আরও একটি কাজ আনমাউন্ট করতে হবে, didMount.currentমানটি পুনরায় সেট করতে হবে false। এই কাস্টম হুক অন্য কোথাও ব্যবহার করার চেষ্টা করার সময়, আপনি ক্যাশের মান পাবেন না।

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

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        let unmount;
        if (didMount.current) unmount = func();
        else didMount.current = true;

        return () => {
            didMount.current = false;
            unmount && unmount();
        }
    }, deps);
}

export default useDidMountEffect;