Understanding useMemo and useCallback

#372 – September 05, 2022


KendoReact is a feature-rich UI component library written with TypeScript. Using the DatePicker as an example, we’ll see how TS can simplify development. Let's dive in.

this week's favorite

If you've struggled to make sense of useMemo and useCallback, you're not alone! I've spoken with so many React devs who have been scratching their heads about these two hooks.

Web apps maintain state to enable more advanced user interactions. When we enter an email into a website, we expect that website to remember the email and not have to enter it over and over each time it displays.

If your React components are not properly catching errors thrown by third-party libraries or React hooks, such errors either end-up crashing the React lifecycle or reaching the top-level of the main execution thread, resulting in the “white screen” scenario:

When you write an Effect, the linter will verify that you’ve included every reactive value (like props and state) that the Effect reads in the list of your Effect’s dependencies. This ensures that your Effect remains synchronized with the latest props and state of your component.

The most challenging aspect of developing any application is often managing its state. However, we are often required to manage several pieces of state in our application, such as when data is retrieved from an external server or updated in the app.