Dan Abramov SLAYS Frontend Interview w/ Ex-Twitch Engineer
Why Stack Overflow recommends it
Stack Overflow users link it as a worked example of React state, flushSync and useEffect cleanup behaviour, since Dan Abramov hits those exact issues while coding the chat UI.
Recommended by 1 people across 1 different months, 2022 to 2023.
What it is
A 1h20m mock frontend interview in which Theo (t3.gg), a former Twitch engineer, interviews React core developer Dan Abramov. After a non-technical question, Dan builds a React chat UI live, covering state management, a colorblind mode, auto-scroll, sending messages and emoji auto-replacement.
What people said
Recommends Alex Dunlop · 2022-06 · Stack Overflow · on “What does flushSync() do in React?”
Chilarai has a great answer! (Maybe due to time of answer and now having more documentation) I do not agree with the idea of using it very sparingly. As a lot of the time it will stop the need for an extra unneeded useEffect (It is also against how Dan suggests to use useEffect [LINK] ). Here is a great example of what it achieves based on Dan Abramov's code: The requirement for this code is an Auto-scroll on new message (I use this code currently and it is very effective). Before, in this example we are unable to scroll after setMessages as the DOM will not be rendered yet and a hook is needed. export default function App() { const [messages, setMessages] = useState([]); useEffect(() => { l
Cites sorold · 2022-11 · Stack Overflow · on “React State returning old value after waiting for update with Effect hook?”
React state will only rerender you app when the function finishes, so you will only check for the updated messages when you call fetchUpTo again. If you need the updated value on the same function call, try using flushSync [LINK] . There is a nice video with Dan Abramov trying to achieve the same as you, I will leave it here for reference: [this video]
Cites Evgeniy S. · 2023-07 · Stack Overflow · on “Are there pitfalls with return value from cleanup function in useEffect of React 16+?”
React documentation contains code samples with the cleanup function with curly braces without return and written on one line: with curly braces and omitted return useEffect(() => { // setup function code // cleanup function code return () => { connection.disconnect(); } }, []); with curly braces omitted and without return useEffect(() => { // setup function code // cleanup function code return () => connection.disconnect(); }, []); In Theo mock-interview where was Dan Abramov as Interviewee, at 23:20 min ( [this video] ) said he had a problem with no returning undefined from the cleanup function. Again: I reread the doc and couldn't find any mention of this. And here I have a dilemma: how to writ