🚀 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;

Question 25: Restricting file uploads to certain file types.

The candidate was asked how to restrict a file upload component to only certain file types. The suggested approach includes using the accept attribute in the <input> element and double-checking the file type in JavaScript.

<input type="file" accept=".pdf,.jpg,.png" onChange={handleFileUpload} />

const handleFileUpload = (e) => {
  const file = e.target.files[0];
  const allowedTypes = ["application/pdf", "image/jpeg", "image/png"];

  if (!allowedTypes.includes(file.type)) {
    alert("Unsupported file type!");
    return;
  }
  // proceed with upload
};

Question 26: Processing and rendering data from a data.json file.

The candidate was asked how to read, process, and display data from a data.json file containing movie/TV metadata. The response detailed steps for fetching the data (assuming it's a local static file), sorting movies based on year, and displaying the number of seasons if the type is a series.

import { useState, useMemo } from "react";
import movieData from "../data/data.json";

const MovieList = () => {
  // Sort by year descending (latest first)
  const sortedMovies = useMemo(() => {
    return [...movieData].sort((a, b) => {
      return parseInt(b.Year) - parseInt(a.Year); // descending
    });
  }, []);

  return (
    <div className="movie-list">
      {sortedMovies.map((item) => (
        <div key={item.imdbID} className="movie-card">
          <img src={item.Poster} alt={item.Title} width={150} />
          <h2>{item.Title} ({item.Year})</h2>
          <p><strong>Genre:</strong> {item.Genre}</p>
          <p><strong>Rating:</strong> ⭐ {item.imdbRating}</p>
          
          {/* Display totalSeasons if Type is 'series' */}
          {item.Type === "series" && item.totalSeasons && (
            <p><strong>Total Seasons:</strong> {item.totalSeasons}</p>
          )}

          <p>{item.Plot}</p>
        </div>
      ))}
    </div>
  );
};

export default MovieList;

Key Takeaways

• A strong understanding of React Router and its useSearchParams hook is essential for handling URL parameters.
• Knowledge of default prop management techniques is crucial for handling missing data.
• The ability to create and explain fundamental React components is a basic requirement.
• Implementing file type restrictions using both HTML attributes and JavaScript validation is important for security and user experience.
• Competence in fetching, processing, and rendering data from JSON files is frequently tested.
• Clear understanding of useMemo hook for optimized performance.