🚀 My Experience Solving the Turing React.js Assessment (18 Questions Deep Dive)

🔹 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

Action → Dispatcher → Store → View

✅ 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:

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. 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!