React Native - Callback Function

Call back?

Called back? Go back?

Call later? Called at the back function?...🤔

Is the banner image accurate in describing the function? Maybe..

Many folks are trying to understand this concept by assigning numerous pseudonyms to it. So, what exactly is this, and how can we make use of it?

According to the renowned Wikipedia,

In computer programming, a callback is a reference to executable code, or a piece of executable code, that is passed as an argument to other code. This allows a lower-level software layer to call a subroutine (or function) defined in a higher-level layer.

In essence, a pot of executable code is passed to a higher-level function as an argument. As a result, we refer to them as lower-level functions.

To be clear, a callback function does not rely on the parent function's completion. It can be called whether the process is complete or is still in progress. However, we do not call the function directly; rather, it is called via the parent function.

With some summery vibes 🌞, here's a basic demonstration of the principle:

https://snack.expo.io/@learningandsucceeding/callback-function-example

As we can see, cook is called twice in this example, with one of the parameters set to the callback function. As a callback, cookSalad is called first, followed by cookSoup. These functions generate a string sequence, which is then displayed on the screen.

Callbacks are used in programming languages like JavaScript and components like addEventListener when app state changes.

Passing a callback function whenever the user presses the button is another good example:

<Button
  onPress={() => {
    alert(‘You made it!');
  }}
  title="Press Me"
/>

Oh..and beside that, did you notice that the TextInput component has callback functions like onBlur, onChange, onChangeText, and so on? Check it here.

Furthermore, there's an additional hook in React called useCallback.

As previously stated, a callback function is an argument in another higher level function. We'll have a callback function as an argument when using the hook, and in this case, memoizedCallback will be equal to the first callback until its dependencies are changed:

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);  //1.doSomething(1,2) 2.doSomething(1,2) 3.doSomething(3,4)
  },
  [a, b],  //1.[1,2] 2.The same dependencies are used 3.[3,4]
);

const doSomething = (a, b) => {
    return a+b;   //1.3  2.Dependencies are not changed, it will be equal to the first callback 3. Dependencies are changed, value will be changed to 7
}

useCallback hook helps to reduce the amount of callbacks that are identical. You can learn more about this topic by reading this visual article, which I recommend.

The useCallback and useMemo hooks are closely similar. According to React Native documentation,

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

Moreover, React Navigation gives a good example of how to utilize useCallback hook with which you can interact on Snack. Or have a look at this example. 🧐💡

Key Takeaways

callback functions are passed as an argument to a higher-level function
whether the parent function is still running or has completed its execution, callback functions can be called
callback functions are called via the parent function
components like as Button or TextInput have their own callback functions such as onPress or onChangeText
useCallback is an additional hook in React
useCallback hook helps to reduce the amount of callbacks that are identical

I hope you enjoyed the article and that it will assist you in your learning journey. Cheers until the next time! ✨😊

React Native - Callback Function

With useCallback() Hook

Key Takeaways