Machine Coding Round: Vanilla JS vs React

Machine Coding Round: Vanilla JS vs React

Should you use vanilla JS or React in the machine coding round? It depends on the company and your comfort. Here is the comparison.

When the Company Specifies

Some companies say "vanilla JS only" or "use React". Always ask before starting. Follow the instructions.

When You Have a Choice

Vanilla JS Pros

• Shows strong fundamentals (DOM manipulation, event handling, state management without a library).
• No build step needed (just HTML, CSS, JS).
• Faster to start (no setup).
• Some companies prefer it (they want to see raw JS skills).

Vanilla JS Cons

• State management is manual (you update the DOM yourself).
• More code for complex UIs.
• Harder to keep the UI in sync with state.

React Pros

• Declarative UI (easier to manage complex state).
• Component-based (reusable, modular).
• Hooks make state management clean.
• Faster for complex UIs (once set up).

React Cons

• Build step needed (if not using a CDN setup).
• Shows framework proficiency, not raw JS skills.
• Some companies want to see vanilla JS.

How to Decide

1. Check the company: do they specify?
2. Check the complexity: simple component (OTP, progress bar) -> vanilla JS. Complex app (food ordering, file explorer) -> React.
3. Check your speed: which can you build faster in 90 minutes?

Setting Up React Quickly

If you choose React, use a CDN setup to avoid build time:

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  // your React code here
</script>

This lets you write React without a build step.

The Takeaway

If the company specifies, follow instructions. If you have a choice: vanilla JS for simple components (shows fundamentals), React for complex apps (faster state management). Use a CDN setup for React to avoid build time. Choose what you are fastest with.