Purpose of using useCallback Hook?

[olapiv]

I'm here because I basically also tried hookifying the original repo myself, but it doesn't work. More specifically, it works when using it only once on a screen, but not when I want to render it multiple times like so:

export default function PolylineDirectionAllFullRoutes() {
    const FullRoutes = useSelector(state => state.fullRoutes);
    const AllFullRoutes = Object.keys(FullRoutes).map((id) => {
        return (
            <PolylineDirection
                key={id}
                origin={FullRoutes[id].origin}
                destination={FullRoutes[id].destination}
                waypoints={FullRoutes[id].waypoints}
                mode={FullRoutes[id].navigationMode}
                strokeColor={FullRoutes[id].color}
            />
        )
    })
    return AllFullRoutes;
}

When I do this, every route is rendered one after another, but it only ever shows a single route at once. Also, interestingly, the strokeColor is almost never correct - they are meant to have different distinct colors. I believe it always uses the same color for all routes, but it happens quite fast.

I compared my approach to yours, and it turns out that using useCallback for handleFetchAndRenderRoute fixes this. Apart from that, our approaches are fairly similar. I looked into a couple of tutorials for useCallback and I still don't understand how this makes the difference. Could somebody perhaps explain this to me?

[wootsbot]

@olapiv look at this blog is an excellent explanation https://kentcdodds.com/blog/usememo-and-usecallback