🚀 React Interview Experience (August 2025): Hiking IT(Part — 5)

Overview

This document outlines a React developer interview experience from August 2025. It provides a detailed look at the questions asked and the expected answers, serving as a resource for frontend developers preparing for React interviews. The interview covered topics ranging from handling URL parameters to component creation and data manipulation.

Interview Rounds

Question 22: Handling redirected parameters from another application.

The candidate was asked how to handle parameters passed via query strings when a user is redirected from one application to another after logging in. The suggested approach involves using useSearchParams from React Router to read the parameters. The response also included persisting the values in localStorage or Redux and using i18n.changeLanguage for multilingual applications.

import { useSearchParams } from "react-router-dom";

const Dashboard = () => {
  const [searchParams] = useSearchParams();
  const lang = searchParams.get('lang') || 'en';

  useEffect(() => {
    i18n.changeLanguage(lang); // For multilingual apps
  }, [lang]);

  return <h1>{t("welcome")}</h1>; // Will render according to language
};

localStorage.setItem("preferredLang", lang);

Question 23: Managing default props when a login parameter is missing.

The candidate was asked how to manage default props if a parameter related to login is not received. The suggested solutions included using default assignment with fallback (const lang = searchParams.get("lang") || "en";), React props with default values (const Welcome = ({ lang = "en" }) => { ... };), and global fallback in i18n configuration.

const Welcome = ({ lang = "en" }) => {
  return <div>{getGreetingText(lang)}</div>;
};

i18n.init({
  fallbackLng: "en",
  resources: { /* translations */ },
});

Question 24: Creating and explaining a simple component.

The candidate was asked to create a simple Counter component and explain it. The provided component uses useState to manage the count, and includes increment and decrement functions.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Counter;