DEV Community

KAMAL KISHOR
KAMAL KISHOR

Posted on

Ultimate Interview Prep Guide: React, Git, Behavioral, and DSA

#webdev #programming #javascript #react

Preparing for a tech interview can be overwhelming, especially when it covers various domains like React, JavaScript, Git, behavioral questions, and data structures. This guide brings together the most frequently asked and impactful questions to help you ace your next interview.

⚛️ React & JavaScript – Core Concepts

1. JSX Syntax

JSX lets you write HTML-like syntax in JavaScript. Expressions are wrapped in curly braces:

const greeting = <h1>Hello, {userName}!</h1>;
Enter fullscreen mode Exit fullscreen mode

2. JSX in the Browser

Browsers don't understand JSX directly. Tools like Babel transpile JSX to vanilla JavaScript.

3. Key Prop for Lists

React uses the key prop to efficiently update and re-render list items:

{items.map(item => <li key={item.id}>{item.name}</li>)}
Enter fullscreen mode Exit fullscreen mode

4. State in React

The state holds dynamic data. For class components, update it with:

this.setState({ count: 5 });
Enter fullscreen mode Exit fullscreen mode

5. Refs in React

Refs give access to DOM nodes or React elements. Updating refs does not trigger a re-render.

6. useMemo for Optimization

useMemo memoizes values to prevent expensive recalculations:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Enter fullscreen mode Exit fullscreen mode

7. useEffect Hook

useEffect acts as a combination of componentDidMount, componentDidUpdate, and componentWillUnmount.

8. Portals

React Portals allow rendering elements outside the DOM hierarchy of the parent component.

9. Controlled vs. Uncontrolled Components

  • Controlled: State handled by React.
  • Uncontrolled: DOM manages its own state.

10. Virtual DOM

React uses a Virtual DOM to compare changes and efficiently update only what's necessary.

11. Higher-Order Components (HOCs)

HOCs are functions that return a new component with added behavior.

🔧 Git – Version Control Essentials

12. Merge vs Rebase

  • git merge: Combines branches, keeps history.
  • git rebase: Moves commits on top of another base for a cleaner history.

13. Check Changed Files in a Commit 

git show --name-only <commit_hash>
Enter fullscreen mode Exit fullscreen mode

14. Revert a Public Commit 

git revert <commit_hash>
Enter fullscreen mode Exit fullscreen mode

Creates a new commit to undo changes.

15. git pull vs git fetch

  • git fetch: Downloads changes.
  • git pull: Downloads and merges changes into your branch.

16. Resolve Merge Conflicts

  1. Edit conflicted files
  2. Use git add <filename>
  3. Run git commit

💬 Behavioral Interview Questions

17. Describe Your Ideal Boss

Someone who communicates clearly, supports growth, and promotes collaboration.

18. Building Relationships in a New Workplace

  • Engage with teammates
  • Join discussions
  • Show empathy and initiative

19. Personal Growth in 5 Years

Highlight how you've matured technically and professionally.

20. Handling Tight Deadlines

Break tasks into chunks, prioritize, and communicate regularly.

21. Resolving Team Conflicts

Use the STAR method:

  • Situation
  • Task
  • Action
  • Result

🧠 DSA – JavaScript Coding Challenge

22. Two Sum Problem

Problem: Return indices of two numbers adding up to the target.

Example:

Input: nums = [2, 7, 11, 15], target = 9
Output: [0, 1]
Enter fullscreen mode Exit fullscreen mode

Solution:

function twoSum(nums, target) {
  const numMap = new Map();
  for (let i = 0; i < nums.length; i++) {
    const complement = target - nums[i];
    if (numMap.has(complement)) {
      return [numMap.get(complement), i];
    }
    numMap.set(nums[i], i);
  }
  return [];
}
Enter fullscreen mode Exit fullscreen mode

Complexity:

  • Time: O(n)
  • Space: O(n)

Good luck on your interview journey! Whether you're targeting frontend roles or full-stack development, mastering these essentials will set you apart from the crowd.

Top comments (0)