Consider this React code snippet where a synthetic event is accessed inside a setTimeout callback:
function Button() {
function handleClick(event) {
setTimeout(() => {
alert(event.type);
}, 1000);
}
return <button onClick={handleClick}>Click me</button>;
}What will the alert show when the button is clicked?
function Button() { function handleClick(event) { setTimeout(() => { alert(event.type); }, 1000); } return <button onClick={handleClick}>Click me</button>; }
Remember that React synthetic events are pooled and reused for performance.
React reuses synthetic event objects for efficiency. After the event handler finishes, the event's properties are cleared. Accessing the event asynchronously (like inside setTimeout) will find the event properties nullified, so event.type becomes undefined.
Given a React event handler, which code correctly prevents the default action of the event?
function handleSubmit(event) { // prevent default here }
Think about the standard method to stop default browser actions in React events.
In React synthetic events, event.preventDefault() is the correct method to stop the default browser behavior. Setting event.defaultPrevented directly or returning false does not work as expected in React.
Examine this React component code:
function Input() {
function handleChange(event) {
const value = event.target.value.toUpperCase();
setInputValue(value);
}
const [inputValue, setInputValue] = React.useState('');
return <input value={inputValue} onChange={handleChange} />;
}Sometimes, this code throws TypeError: Cannot read property 'value' of null. Why?
function Input() { function handleChange(event) { const value = event.target.value.toUpperCase(); setInputValue(value); } const [inputValue, setInputValue] = React.useState(''); return <input value={inputValue} onChange={handleChange} />; }
Think about React's event pooling and when event properties are accessible.
React pools synthetic events for performance. If you access event properties asynchronously or after an async call, the event may be nullified. Here, if setInputValue triggers a re-render that delays access, event.target can be null. To fix, copy event.target.value to a variable before async calls.
React uses a synthetic event system instead of native browser events. Which explanation best describes how this improves performance?
Think about how reusing objects can save resources.
React creates synthetic event objects that it reuses (pools) for multiple events. This reduces the number of objects created and garbage collected, improving performance. React also attaches a single event listener at the root for delegation, not on every node.
Analyze this React component:
function Counter() {
const [count, setCount] = React.useState(0);
function handleClick(event) {
event.persist();
setTimeout(() => {
setCount(count + 1);
console.log(event.type);
}, 1000);
}
return <button onClick={handleClick}>Count: {count}</button>;
}After clicking the button once, what will be the value of count shown on the button after 1 second?
function Counter() { const [count, setCount] = React.useState(0); function handleClick(event) { event.persist(); setTimeout(() => { setCount(count + 1); console.log(event.type); }, 1000); } return <button onClick={handleClick}>Count: {count}</button>; }
Consider how closures capture state values in React hooks.
The count variable inside the setTimeout callback is the value when the handler was created (0). The setCount(count + 1) uses this stale value, so after 1 second, count updates to 1 and the component re-renders to show the updated count.