79150024

Date: 2024-11-02 05:27:42
Score: 1
Natty:
Report link

The answer from @OriDrori would address the question.

The following is an alternate solution, not based on ref. Certainly it comes at a cost of an extra state and a separate useEffect statement.

Coding highlights

a. An extra state for sorting

  const [prevSorting, setPrevSorting] = useState();

b. Two separate useEffect invocations

The first useEffect will invoke for every render, but the logic inside will be applied with respect to the changes in sorting state.

The second useEffect will invoke only on the changes in sorting state, and will keep preSorting state in synch.

  useEffect(() => {
    if (sorting !== prevSorting) {
      loadEntries(sorting, searchParameters);
    }
  }); 


  useEffect(() => {
    setPrevSorting(sorting);
  }, [sorting]);

Code - full listing:

App.js

import { useState, useEffect } from 'react';

function loadEntries(sorting, searchParameters) {
  console.log(`loadEntries executed with : ${sorting},${searchParameters}`);
}

export default function App() {
  const [searchParameters, setSearchParameters] = useState('');
  const [sorting, setSorting] = useState();
  const [prevSorting, setPrevSorting] = useState();

  // update searchParameters if the user enters someting
  function handleChangeSearchParameters(newValue) {
    setSearchParameters(newValue);
  }
  // update sorting if the user clicks on a column in the table
  function handleClickSorting(newValue) {
    setSorting(newValue);
  }

  // PROBLEM: I only want to call loadEntries() if sorting changes, but I need searchParameters for it too!
  useEffect(() => {
    if (sorting !== prevSorting) {
      loadEntries(sorting, searchParameters);
    }
  });

  useEffect(() => {
    setPrevSorting(sorting);
  }, [sorting]);

  return (
    <>
      <button onClick={() => handleClickSorting(Math.random())}>
        Click sorting
      </button>
      <br />
      <label>searchParameters</label>
      <br />
      <input
        value={searchParameters}
        onChange={(e) => handleChangeSearchParameters(e.target.value)}
      ></input>
    </>
  );
}

Test runs

A search parameter newly entered

It did not invoke useEffect for the changes in Sorting, please see there is nothing logged in the console

Browser display - A search parameter newly entered

A change in Sorting by clicking the button

It did invoke useEffect for the changes in Sorting, please see there is something logged in the console.

Browser display - A change in sorting

A change in the search parameter

It did not invoke useEffect for changes in Sorting, please see there is nothing newly logged in the console.

Browser display - A change in search parameter

A change in Sorting by clicking the button

It did invoke useEffect for changes in Sorting, please see there is something newly logged in the console.

Browser display - Another change in sorting

Reasons:
  • Blacklisted phrase (0.5): I need
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @OriDrori
Posted by: WeDoTheBest4You