Question

Imagine you have a special child screen part that only updates when its gifts change. If you give this child part a `doSomething` gift that is a function, and the parent screen part rebuilds, what special tool should the parent use to make sure the `doSomething` gift looks the same to the child if it hasn&#x27;t truly changed, so the child doesn&#x27;t update for no reason?

Accepted Answer

The special child screen part, which only updates when its "gifts" (properties) change, relies on comparing the current gifts to the previous gifts. When a function like `doSomething` is passed as a gift, the child typically checks if the function&#x27;s *reference* has changed. In JavaScript, if a parent screen part rebuilds and defines a function directly within its render logic, even if the function&#x27;s code is identical, a *new function object* is created in memory each time. This new function object has a different memory address, meaning its reference is different from the one passed in the previous render. Consequently, the child&#x27;s comparison mechanism will see a changed gift (a new function reference) and trigger an unnecessary update, even though the underlying logic of the `doSomething` function hasn&#x27;t truly changed from the developer&#x27;s perspective. To prevent this, the parent screen part should use a mechanism to *memoize* the function. Memoization is an optimization technique where the result of a function call is cached, and when the same inputs occur again, the cached result is returned instead of re-executing the function. In this context, it applies to caching the function *itself*. The specific tool for this is `useCallback` (a common solution in modern component-based UI frameworks). `useCallback` is a hook that returns a memoized version of the callback function you pass to it. It takes two arguments: the function itself and an array of dependencies. The `useCallback` hook will only re-create the function if one of its dependencies in that array has changed. Dependencies are any values (variables, state, other props) that the function relies on from its outer scope. By wrapping the `doSomething` function with `useCallback` in the parent component, like `const doSomething = useCallback(() => { /* function logic */ }, [dependency1, dependency2]);`, the parent ensures that the *same function reference* is passed to the child across multiple renders, as long as the specified dependencies remain unchanged. This stability in the function&#x27;s reference allows the child&#x27;s special update mechanism to correctly determine that the `doSomething` gift has not truly changed, thereby preventing needless re-renders of the child screen part.

Home → All Courses → Programming Courses → React JS Development → Flashcard