lab - 01

React.memo and useMemo both optimize React performance, but they operate at different levels. React.memo wraps an entire component and prevents it from re-rendering if its props haven’t changed (it’s a component-level memoization tool). Think: “don’t redraw this UI block unless inputs change.” In contrast, useMemo is inside a component and memoizes the result of a calculation or value, so expensive computations aren’t re-run on every render (it’s a value-level optimization). Think: “don’t recompute this derived value unless dependencies change.”

In short:

React.memo → avoids re-rendering components

This one exists mainly because of React.memo.

Look:<MovieCard movie={movie} onDelete={handleDelete} />

MovieCard receives TWO props:movie onDelete

Now imagine:const handleDelete = (id) => { removeMovie(id); };

Every render:Render #1 handleDelete = Function A Render #2 handleDelete = Function B Render #3 handleDelete = Function C

React sees:onDelete changed

because Function A ≠ Function B.

Therefore:React.memo fails MovieCard rerenders

With useCallback:const handleDelete = useCallback((id) => { removeMovie(id); }, []);

Now:Render #1 Function A Render #2 Function A Render #3 Function A

Same function.

React.memo sees:movie unchanged onDelete unchanged

and skips rendering.

The full chain

Watchlist Page ↓ useMemo ↓ filteredMovies ↓ MovieCard (React.memo) ↓ onDelete (useCallback)

Imagine a MovieCard:<MovieCard movie={movie} />

and:const MovieCard = React.memo(...)

Suppose you type into a search box.

Without React.memo:Page rerenders ↓ Movie 1 rerenders Movie 2 rerenders Movie 3 rerenders Movie 4 rerenders ...

Even though the movies didn't change.

With React.memo:Page rerenders ↓ Movie unchanged? ↓ Yes ↓ Skip rerender

So React.memo protects the component.

Suppose you have 15 movies.movies.filter(...)

Every render React would normally run the filter again.Type "i" ↓ filter runs Type "in" ↓ filter runs Type "int" ↓ filter runs

That's okay.

But imagine 10,000 movies.

Filtering becomes expensive.

So:const filteredMovies = useMemo(() => { return movies.filter(...); }, [movies, search, genre]);

Now React says:Did movies change? Did search change? Did genre change?

If NO:Use old result Don't run filter again

Most React code works with data:const [name, setName] = useState("");

But sometimes you want the actual HTML element.

Example:<input>

How do you tell the cursor to jump into it?

You need access to the real input element.

That's what useRef does.

Step 1

Create a ref:const usernameRef = useRef();

Think:usernameRef ↓ will point to an input later

Step 2

Attach it:<input ref={usernameRef} />

Now:usernameRef ↓ <input>

Step 3

Use itusernameRef.current.focus();

Meaning:Take the input ↓ Put the cursor inside it

Real life example from your assignment:

User enters:username: admin password: 9999

Clicks Login.

Wrong password.

Show:Wrong username or password

Then:usernameRef.current.focus();

Result:Cursor automatically jumps back to username input

Mental model

useState

Stores datausername = "admin" password = "1234"

useRef

Normal HTML

<input>

User types:a ab abc

The browser stores the text.

Controlled Input

React stores the text instead.const [username, setUsername] = useState("");

Think:username = ""

User types:h

React updates:username = "h"

User types:hy"

React updates:username = "hy"

The input always shows whatever is inside username.<input value={username} onChange={(e) => setUsername(e.target.value)} />

Meaning:User types ↓ React state changes ↓ Input updates

So React is in control.

Without it:Login page knows user is logged in

But:Navbar doesn't know ProtectedRoute doesn't know Watchlist doesn't know

With Auth Context:AuthContext ↓ Login Page Navbar ProtectedRoute Watchlist

Everyone can check:const { isLoggedIn } = useAuth();

Whole login page in one diagram

When login succeeds:login(username);

Inside Auth Context:{ isLoggedIn: true, user: "admin" }

Create a ref:const usernameRef = useRef();

Attach it:<input ref={usernameRef} />

If login fails:setError("Wrong username or password"); usernameRef.current.focus();

Imagine this component:function Parent() { const handleDelete = (id) => { removeMovie(id); }; return <MovieCard onDelete={handleDelete} />; }

Every render:Render #1 handleDelete = Function A Render #2 handleDelete = Function B Render #3 handleDelete = Function C

Even though the code is identical, React creates a new function object each time.

Now imagine:const MovieCard = React.memo(...)

React.memo asks:Did props change?

It sees:Function A ≠ Function B

so:Re-render MovieCard

even though nothing meaningful changed.

useCallback fixes that

const handleDelete = useCallback((id) => { removeMovie(id); }, [removeMovie]);

Now:Render #1 handleDelete = Function A Render #2 handleDelete = Function A Render #3 handleDelete = Function A

Same function reference.

React.memo sees:Movie unchanged Function unchanged

and skips rendering.

Super practical explanation

Without useCallback:Type in filter box ↓ Watchlist page rerenders ↓ All movie items rerender

With useCallback + React.memo:Type in filter box ↓ Watchlist page rerenders ↓ Movie items stay untouched

For your assignment

Without Context:App ↓ Navbar ↓ MovieList ↓ MovieCard

Suppose MovieCard needs the watchlist.

You pass it through every level:<App watchlist={watchlist} /><Navbar watchlist={watchlist} /><MovieList watchlist={watchlist} /><MovieCard watchlist={watchlist} />

This is called prop drilling.

With Context:WatchlistContext ↓ Everyone can access it

Any component can do:const { watchlist } = useWatchlist();

Examples in your project:

Navbar → show count

Movie Card → add movie

Details Page → remove movie

Watchlist Page → show saved movies

Movie item component:const WatchlistItem = React.memo(({ movie }) => { ... });

Without memo:Type one letter in filter ↓ All movie items re-render

With memo:Type one letter ↓ Only necessary updates happen

This is what your professor means by:

جلوگیری از رندر بیهوده Prevent unnecessary re-renders.

Normally:const handleDelete = (id) => { removeMovie(id); };

Every render creates a new function.

Professor wants:const handleDelete = useCallback((id) => { removeMovie(id); }, [removeMovie]);

Godfather [Details] [Delete]

Details:navigate(`/movie/${movie.id}`)

Show:1 movie shown out of 3

User types:god

Use:const filteredMovies = useMemo(() => { return watchlist.filter(movie => movie.title.toLowerCase().includes(search.toLowerCase()) ); }, [watchlist, search]);

Result:Godfather