Where should I declare functions that are called inside a useEffect() hook?
A decision to define a function within or outside of useEffect depends on where all the functions is called.
If your function is called only from within the useEffect then it makes sense to define it within the useEffect.
However is the same function is being called from within useEffect as well as other event handlers or other effects, you need to define it outside of useEffect
PS. in your case you are just updating the state for which you needn't define a separate function
function App() {
const [someState, setSomeState] = React.useState(0);
const [someTrigger, setSomeTrigger] = React.useState(false);
React.useEffect(() => {
setSomeState(oldState => oldState + 1);
},[someTrigger])
return(
<React.Fragment>
<div>I am App</div>
<div>My state: {someState}</div>
<button onClick={()=>setSomeTrigger((prevState) => !prevState)}>Click</button>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>As far as you scenario is concerned, you would write it like
useEffect(() => {
const calcVal = (oldState) => {
// calculate previous state based on oldState
}
setSomeState(calcVal);
}, [activePriceFilters])