Dispatching actions inside inner functions of funtional component

Question

I read that inner functions in statefull functional component should be defined using useCallback when we use setState or that function is passed as prop to child component. But what about dispatching actions? Do we need to use 'useCallback' there also?

import React from "react";
import { logout } from "../../../../actions/auth";
import { useDispatch } from "react-redux";

function Navbar (props) {
    ...

    const dispatch = useDispatch();

    const handleClick = () => {
        dispatch(logout());
    }

    return (
       <div> 
         <button onClick={handleClick}>Logout</button> 
       </div>
    )
}

It would still work without using `useCallback` unless you're depending on the current value of a state or a variable to achieve something. — jstarnate, Apr 05 '21 at 06:38
You could potentially want to use `useCallback` is if `handleClick` is passed as a prop to some component that executes some computationally expensive function on each render. `useCallback` means that re-renders of this child component won't be triggered by `handleClick` getting re-created. Here there is no reason to use it. — Linda Paiste, Apr 05 '21 at 06:45
I can't see where in your code you would need to call useCallback, since you don't have any variables that will affect the component causing it to rerender. — Marcelo Viana, Apr 05 '21 at 06:46

score 3 · Answer 1 · answered Apr 05 '21 at 06:39

So first of all you need to know why you sometimes need useCallback around your functions and listeners.

The powerful useMemo and useCallback hooks create a value which is referentially stable (prev === current) between re-renders under the condition that the inputs (or “dependencies”) arrays doesn’t change its values (again, referentially). This allows children components you pass your values to to memoize themselves with React.memo and similar tools.

Why would you need to let them memoize? For performance reasons. And the first rule of performance optimization is you don’t optimize prematurely. So, do not blindly wrap everything in useCallback and useMemo: write your code and only once you reach some performance bottleneck investigate and eventually solve with those hooks.

To answer your question, do dispatch functions need to be wrapped? As I infer from your code we are talking about React Redux’ dispatch. The answer is no: React Redux dispatch, useReducer’s dispatch, useState’s updater function are all referentially stable.

Thanks @PierPaoloRamon. Was just trying to follow best practices.Also wanted to decrease the number of re-rendering of one component as I observe console.log("component rerendered") prints out 7-8 times — nikita kumari, Apr 05 '21 at 06:52

score 0 · Answer 2 · answered Apr 05 '21 at 06:43

dispatch does not effect to your inner functions. Your inner functions will be re-created when you create it without useCallback or with useCallback but dependencies changed

You can put dispatch as a dependency of useCallback and use it like normal function

const handleClick = useCallback(() => {
    dispatch(logout());
}, [dispatch])

Dispatching actions inside inner functions of funtional component

2 Answers2