Refs and Memoization: Mention React Compiler (#30879)

Now in stable release and actively recommended by docs

Author: goran1010

react/more_react_concepts/refs_and_memoization.md

@@ -6,8 +6,9 @@ How can we do DOM manipulations that we usually do in vanilla JavaScript? Is it
 
 This section contains a general overview of topics that you will learn in this lesson.
 
-- Explore `useRef` hook and its use cases.
-- Explain memoization and how `useCallback` and `useMemo` can be used.
+- `useRef` hook and its use cases.
+- Memoization and how `useCallback` and `useMemo` can be used.
+- Automatic memoization with React Compiler.
 
 ### The useRef hook
 
@@ -292,9 +293,15 @@ Yay, there's only one arrow function, and it's simpler to read. There's nothing
 
 Which one should we use, then? Use `useMemo` for *any* value types, and use `useCallback` specifically for functions. At the end of the day, they both do similar things with a tiny difference, so use whatever you prefer.
 
+### React Compiler
+
+We now also have React Compiler, which is a relatively new build-time tool that can automatically optimize our React app. It will analyze our code and memoize appropriate components and hooks, primarily focusing on improving update performance (re-rendering existing components). This means that in most cases, we *don't have to* manually memoize components or hooks.
+
+So if React Compiler memoizes our hooks and components automatically, do we need to know about `React.memo`, or hooks like `useMemo` and `useCallback`? Short answer - yes. Understanding manual memoization helps us understand what React Compiler does under the hood, not to mention that you will almost certainly run into manual memoization techniques in existing codebases. Lastly, there may be cases where we need more control over what gets memoized and how compared to what React Compiler will automatically do, such as making sure a `useEffect` dependency is memoized to ensure it doesn't change unnecessarily and fire the effect.
+
 ### Conclusion
 
-Phew, this was a long lesson. Refs and memoization are difficult concepts to grasp, but we're sure you'll understand them with practice. Refs particularly are really useful for some use-cases, as for memoization, only reach out to it when you absolutely need it. These topics also make for great interview questions, so make sure you know the difference between `useMemo` and `useCallback`!
+Phew, this was a long lesson. Refs and memoization are difficult concepts to grasp, but we're sure you'll understand them with practice. Refs particularly are really useful for some use cases. As for automatic memoization, it can help optimize our app without needing to write any additional code. Manual memoization may also be necessary in certain cases, but you should only reach out for it when you absolutely need it. These topics also make for great interview questions, so make sure you know the difference between `useMemo` and `useCallback`!
 
 ### Assignment
 
@@ -304,6 +311,7 @@ Phew, this was a long lesson. Refs and memoization are difficult concepts to gra
 1. We've only learned about a basic implementation of the `useRef` hook. For more examples about its usage and why we should be wary of using the hook (more on the links they provided in the guide), check out the interactive guide of the React documentation for [useRef hook](https://react.dev/reference/react/useRef) .
 1. The article [useRef instead of querySelector in React](https://meje.dev/blog/useref-not-queryselector) by Caleb Olojo briefly tells some unexpected behaviors when trying to manipulate the DOM directly with DOM manipulation methods and why we should prefer `useRef` over other DOM manipulation methods like `querySelector`. Check it out!
 1. As we have learned, the `useRef` hook has other uses other than what we've primarily covered which is DOM Manipulation. Get to know more about its use-cases in this great article by Dan Abramov [Making setInterval Declarative with React Hooks](https://overreacted.io/making-setinterval-declarative-with-react-hooks/).
+1. Go through [React Compiler docs](https://react.dev/learn/react-compiler) to learn a bit more about it, and to find out how to install and configure it in your projects.
 
 </div>
 
@@ -315,3 +323,4 @@ The following questions are an opportunity to reflect on key topics in this less
 - [What is the difference between useMemo and useCallback?](#usememo-or-usecallback)
 - [How do useMemo and useCallback help optimize the performance of React components?](#optimization-description)
 - [When should you memoize a value?](https://kentcdodds.com/blog/usememo-and-usecallback)
+- [What is React Compiler and how does it optimize React applications?](https://react.dev/learn/react-compiler/introduction)