Recently, I completed the Turing React.js technical assessment, which consisted of 18 multiple-choice questions covering core React fundamentals, Redux concepts, performance optimization, lifecycle methods, and modern best practices.
If you're planning to apply to Turing, you can use my referral link here: π https://developers.turing.com/r/JwKiC2MeyT
Hereβs a breakdown of the most important concepts tested β and what you should absolutely know before attempting a similar assessment.
πΉ 1. Performance Optimization in React
β
useMemo for Expensive Calculations
If a function performs heavy computation on every re-render, wrap it with:
useMemo(() => calculateValue(), [dependencies]);
This prevents unnecessary recalculations.
β
React.memo & PureComponent
- React.memo β Prevents unnecessary re-renders of functional components.
- React.PureComponent β Provides a default shallow comparison via
shouldComponentUpdate().
Used when props/state changes should trigger controlled re-renders.
β React Profiler
Using React DevTools Profiler helps identify:
- Unnecessary re-renders
- Expensive components
- Performance bottlenecks
β
Code Splitting with React.lazy
To reduce bundle size:
const MyComponent = React.lazy(() => import('./MyComponent'));
This improves initial load performance.
πΉ 2. React Hooks Rules (Common Pitfall)
Hooks must:
- Be called at the top level
- Only inside React components or custom hooks
- Not inside event handlers or nested functions
β Wrong:
const handleClick = () => {
const [count, setCount] = useState(0);
}
β Correct:
const [count, setCount] = useState(0);
πΉ 3. Event Propagation & stopPropagation()
When a button is inside a clickable card, clicking the button may trigger both handlers due to bubbling.
const onAddToCart = (e) => {
e.stopPropagation();
};
πΉ 4. Redux Concepts
β Flux Data Flow
β mapDispatchToProps
- Used to dispatch actions
- Not used to read state (thatβs
mapStateToProps)
β Container Components
- Connect to Redux store
- Dispatch actions
- Pass data to presentational components
They do NOT describe the UI layer.
πΉ 5. Lifecycle Methods & Cleanup
Mounting Lifecycle:
constructor()getDerivedStateFromProps()render()componentDidMount()
Important: Remove Event Listeners
componentDidMount() {
document.addEventListener("click", this.closeMenu);
}
componentWillUnmount() {
document.removeEventListener("click", this.closeMenu);
}
Avoid memory leaks.
πΉ 6. React Portals (Rendering Outside Parent DOM)
ReactDOM.createPortal(children, document.getElementById('modal-root'));
Used for:
- Modals
- Tooltips
- Overlays
πΉ 7. Updating Deeply Nested State (Immutability)
setState(prev => ({
...prev,
nested: {
...prev.nested,
value: "new"
}
}));
Never mutate state directly.
πΉ 8. React.createElement Equivalent
<h1 className="hello">Greetings!</h1>
Equivalent:
React.createElement('h1', { className: 'hello' }, 'Greetings!');
πΉ 9. setState Second Argument
this.setState(updater, callback);
The second argument is a callback that runs after state update completes.
π― What This Assessment Really Tests
- Understanding of React internals
- Performance optimization thinking
- Lifecycle awareness
- Clean architecture knowledge
- Redux fundamentals
- Modern best practices
π‘ Final Thoughts
If you're preparing for a React technical assessment:
- Master hooks rules
- Understand lifecycle deeply
- Practice Redux data flow
- Focus on performance patterns
- Know immutability well
- Be comfortable with portals and event bubbling
React fundamentals matter more than fancy syntax.
If you're a developer preparing for Turing or similar remote React roles β sharpen the basics. Thatβs what makes the difference.
π Happy coding!
