3 replies

React useRef() is being useless. Can't prevent re-fetching on form clear

I have a vehicle update form component with a 'clear form' button.

The button resets the useState form object field values to nothing again, and due to this state change, React of course is re-rendering the entire component, which is fine for seeing blank form fields again, however this re-render is also causing fetch api's (my fetchInventory and fetchSteps) to also be re-run, which is unnecessary since the data from the fetch api's is already saved (from the component's first mounting/rendering).

To avoid re-running these fetch calls upon re-render, I set some useRef variables - stepsFetched & dataFetched - to be false initially, but then set to 'true' after the first running of each fetch call (once I have the data), and then additionally, I am testing their truthness/falseness inside of the fetch function, prior to the call, to know whether to actually make the fetch call:

  const fetchSteps = async () => {
    if (stepsFetched.current) {
      console.log("stepsFetched is true");
      return;
    }

    try {
      const response = await axios.get(`${apiUrl}/api/steps`);

  const fetchInventory = async () => {
    if (dataFetched.current) {
      console.log("dataFetched is true");
      setLoading(false);
      return;
    }
    try {
      const response = await axios.get(`${apiUrl}/api/admin/vehicle/list`);
    };

  const fetchSteps = async () => {
    if (stepsFetched.current) {
      console.log("stepsFetched is true");
      return;
    }

    try {
      const response = await axios.get(`${apiUrl}/api/steps`);

  const fetchInventory = async () => {
    if (dataFetched.current) {
      console.log("dataFetched is true");
      setLoading(false);
      return;
    }
    try {
      const response = await axios.get(`${apiUrl}/api/admin/vehicle/list`);
    };

The useRefs however, are not maintaining their being set to 'true' after the initial mounting/rendering of the component, into the second rerender, so as to trigger these if() statements and prevent another fetch.

Am I doing something else wrong here? Shouldn't they still be 'true' on a re-render? Are the 'await' or 'async' keywords here causing the problem possibly?

VehicleUpdateForm_2.js7.3KB

KP-C

Kevin Powell - Community•2y ago•

3 replies

thethingisback

React useRef() is being useless. Can't prevent re-fetching on form clear

  const fetchSteps = async () => {
    if (stepsFetched.current) {
      console.log("stepsFetched is true");
      return;
    }

    try {
      const response = await axios.get(`${apiUrl}/api/steps`);

  const fetchInventory = async () => {
    if (dataFetched.current) {
      console.log("dataFetched is true");
      setLoading(false);
      return;
    }
    try {
      const response = await axios.get(`${apiUrl}/api/admin/vehicle/list`);
    };

  const fetchSteps = async () => {
    if (stepsFetched.current) {
      console.log("stepsFetched is true");
      return;
    }

    try {
      const response = await axios.get(`${apiUrl}/api/steps`);

  const fetchInventory = async () => {
    if (dataFetched.current) {
      console.log("dataFetched is true");
      setLoading(false);
      return;
    }
    try {
      const response = await axios.get(`${apiUrl}/api/admin/vehicle/list`);
    };

VehicleUpdateForm_2.js7.3KB

React useRef() is being useless. Can't prevent re-fetching on form clear

React useRef() is being useless. Can't prevent re-fetching on form clear

Similar Threads

Similar Threads

Similar Threads