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
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.
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.
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.