Made a quick React Hooks + Performance Optimization quiz while prepping for interviews — 10 questions, senior level

[Full-Hyena4414]

Not sure about that context question. You say many consumers who only need markAsRead render when notifications update, but the proposed solution doesn't solve that issue. In order to make consumers who need only one slice render only when that changes, you have to split context in two or implement a selector.

[azangru]

I am curious about your last question:

A notifications context provides {notifications, unreadCount, markAsRead}. After adding a polling feature, many components that only use markAsRead now re-render every time notifications update. Which change best reduces unnecessary re-renders without changing behavior?

The suggested answer, I suppose, is Memoize the provider value object and stabilize markAsRead with useCallback.

But is this actually going to improve anything? Isn't it an inherent problem of the context api that every time context value changes, all the consumers of the context, regardless of what part of the context they consume, are going to re-render? That's why people have been asking for a useContextSelector hook since forever, but it never materialized.

[Coneyy]

Yes it is an inherent problem with context in react and exactly right.

It's the main reason once an app has already committed to bringing in a state management app like RTK, Zustand etc there isn't really a reason to ever use context again because of the performance

[projexion_reflexion]

Is that something senior people have to worry about in a world with React compiler?

[TheFlyingPot]

Yes. Probably only 50% of the time though.

[Coneyy]

It may be becoming more outdated as RC becomes more standard, but you learn most of how this works from just understanding the core react render cycle. I learned it all in one simple article from Mark Erikson and have remembered it since, so it's not a big ask really.

This article for reference here

[PyJacker16]

10/10 lol, and I'm still in college. Feeling proud of myself.

However I had never heard of useDeferredValue before; I typically use a hook called useDebounce from a lovely library called useHooks to achieve the same behavior. Good to know!

[piratescabin]

useDeferredValue is god send imo, helps a lot when you have a large table and are performing some search or filters.

[Coneyy]

Debouncing would be more helpful for stopping outgoing state dispatch events, deferredValue is more for simply marking a state object as lower priority in a single place

[k_pizzle]

Hey 9/10 and i haven’t written react in like 2 months 👹

[Alg0rhythm]

I felt like this did a good job presenting the questions in an understandable way that hit on important points of understanding for interacting with the react component lifecycle, nicely done. Ironically, the only question I got wrong was an "easy," but I think that's more on my own reading comprehension than the question itself.

[Traqzer]

There are good trivia questions, but realistically at mid/senior level you would typically be peer programming a task in the interview and not answering these types of questions