React Course: Add React Compiler section to Refs And Memoization lesson

[goran1010]

Because

Since React Compiler has been pushed to a stable version 1.0 for some time, and the React docs on both useMemo and useCallback have a Note recommending usage of automatic memoization with React compiler, over manual memoization - it seems like a good time to introduce a short section on React Compiler to the Refs And Memoization lesson in the React Course.

This PR

• Adds a new React Compiler section
• Modifies Lesson overview section by adding React Compiler list item, and changes the wording of other list items to remove redundant phrases
• Add a new assignment to read the React Compiler docs to the Assignment section
• Add a Knowledge check item relating to React Compiler

Issue

Closes #30878

Additional Information

Pull Request Requirements

• I have thoroughly read and understand The Odin Project curriculum contributing guide
• The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• If this PR addresses an open issue, it is linked in the Issue section
• If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
• If any lesson files are included in this PR, they follow the Layout Style Guide

[mao-sz]

Nice, pretty much what I was thinking. Last little bits below

[mao-sz]

While the RC docs cover this in more detail, I think a subtle tweak like below is a little more "ah, I see" at a first read at least. What do you think?

Suggested change

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 the existing code bases. Lastly, there will be cases where we will want to manually memoize an expensive function, or make sure a `useEffect` dependency is memoized to ensure it doesn't change unnecessarily and fire the effect.

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 the existing code bases. 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.

[goran1010]

I think it's a decent idea to say that obviously manual memoization offers us greater control over Compiler's automatic one.

I've decided to just incorporate your suggestion for the 2nd paragraph- I just kept changing it over and over again (too undecided on the exact wording)...

[mao-sz]

I think as of 1fd74b9 I'm happy with the wording of the section.
Just spotted some typos on a final proof read, then we'll be good to merge after

[goran1010]

Thanks for the suggestions as always Mao.