type
status
date
slug
summary
tags
category
icon
password
Below is a Q&A style summary of our discussion with key words highlighted:
Interviewer: What’s the difference between
var and let/const in JavaScript?Candidate:
varis function scoped and hoisted (initialized withundefined), so accessing it before its declaration returnsundefined.
letandconstare block scoped and also hoisted, but they aren’t initialized until their declaration is reached. This creates a Temporal Dead Zone (TDZ), causing a ReferenceError if accessed too early.
constcreates an immutable binding (you can’t reassign it), though if it holds an object, that object’s properties can be modified unless you explicitly freeze it.
Interviewer: What does immutability mean in JavaScript and Redux?
Candidate:
- Immutability means once data is created, it should not be changed. Instead of modifying existing objects, you return new objects (with new references) when updating state.
Object.freeze()can enforce immutability at runtime by freezing an object’s top-level properties, though it’s a shallow freeze. In Redux, immutability is generally maintained by coding practices or libraries rather than relying solely on freezing.
Interviewer: How do plain Redux and Redux Toolkit differ in handling state updates?
Candidate:
- Plain Redux:
- You must manually return new state objects in your reducers to trigger re-renders.
- Direct state mutation (e.g.,
state.xxx.aaa = bbb) might not trigger an error immediately but won’t update the UI since the state reference remains unchanged.
- Redux Toolkit (with Immer):
- It allows you to write reducers in a "mutable" style. You can modify a draft state (via Proxies) provided by Immer, and it automatically produces a new immutable state.
- Additionally, in development, Redux Toolkit often includes middleware (like the immutable state invariant middleware) that freezes state to prevent direct mutations.
Interviewer: How does React handle state updates in relation to immutability?
Candidate:
- In React, whether using
setStatein class components or state setters with hooks, you must provide a new object reference to trigger a re-render.
- Direct mutations of state won’t work because React relies on shallow comparisons to detect changes. If the state’s reference doesn’t change, React won’t re-render the component.
Interviewer: Why do I get an error when I try to modify state retrieved by selectors in Redux Toolkit?
Candidate:
- In Redux Toolkit, the state is automatically frozen (using middleware in development mode) after it’s produced by the reducers.
- This means that the state you retrieve with selectors is immutable—attempting to modify it directly will throw an error.
- In contrast, plain Redux does not automatically freeze the state unless you add such middleware, so direct modifications might not immediately cause errors even though they break immutability.