Sidharth Foundations & Housing Limited Front-End Developer Freshers Interview Questions

Introduction

Getting ready for a Front-End Developer interview can be difficult for freshers because interviewers may ask questions from different areas of development. Along with basic concepts, candidates may also be asked to write small pieces of code or explain how they would solve a problem.

Recently, trainees from Payilagam attended a Front-End Developer interview at Sidharth Foundations & Housing Limited. The interview covered questions from React, JavaScript, TypeScript, and Tailwind CSS. The trainees shared the questions they faced, which gives other freshers a useful idea of what they can expect in a similar interview.

The questions included React hooks such as useState, useEffect, useMemo, and useCallback. There were also questions about rendering, re-rendering, controlled components, API calls, JavaScript closures, event bubbling, array methods, TypeScript, and responsive design using Tailwind CSS.

These questions are useful for freshers who are preparing for Front-End Developer roles. They can also help learners understand which topics they should practice while attending React Training in Chennai or preparing for their first technical interview.

This article covers all 20 questions shared by the trainees, along with simple explanations and examples where required. Payilagam, a Best Software Training Institute in Chennai, focuses on practical learning, so real interview questions like these can help learners understand how the concepts they study are used during actual interviews.

React Interview Questions For Freshers

1. Difference Between useState and useEffect

useState and useEffect are two commonly used React Hooks, but they have different purposes.

useState is used to store and update data in a React component. For example, a counter can use state to keep track of its current value.

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

Here, count contains the current value, and setCount is used to update it.

useEffect is mainly used to handle side effects in a component. Fetching data from an API, setting a timer, or performing an action when a component loads are some common examples.

useEffect(() => {

    console.log("Component loaded");

}, []);

The empty dependency array means this effect runs after the component is initially rendered.

A simple way to remember the difference is:

• ☑️ useState → stores and updates data.
• ☑️ useEffect → performs side effects.

2. useMemo vs useCallback

useMemo and useCallback are both React Hooks used when we want to avoid unnecessary work during rendering. Although they look similar, they are used for different purposes.

To remember the result of a calculation useMemo is used.

const total = useMemo(() => {

    return price * quantity;

}, [price, quantity]);

Here, React can reuse the calculated total until price or quantity changes.

useCallback is used to remember a function.

const handleClick = useCallback(() => {

    console.log("Button clicked");

}, []);

The function can then be passed to another component without creating a new function on every render.

The simple difference is:

• ☑️ useMemo → remembers a calculated value.
• ☑️ useCallback → remembers a function.

3. What Is Rendering in React?

Rendering in React is the process of creating or updating the user interface based on the current state and props of a component.

For example, consider a simple counter:

function Counter() {

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

    return (

        <button onClick={() => setCount(count + 1)}>

            {count}

        </button>

    );

}

When the button is clicked, the count value changes. React then renders the component again to determine what the updated UI should look like.

Rendering does not mean that the entire webpage is rebuilt every time something changes. React checks what has changed and updates the required parts of the UI.

A fresher should understand that state changes, prop changes, and changes in a component’s parent can cause a component to render again.

4. How Do You Manage Re-rendering in React?

Re-rendering is a normal part of working with React. When the state or props of a component change, React may render the component again to update the UI.

The goal is not to stop every re-render. Instead, developers should try to avoid unnecessary re-renders when they affect the application’s performance.

Some simple ways to manage re-rendering include:

• ☑️ Keep state close to the component that actually needs it.
• ☑️ Avoid creating unnecessary state variables.
• ☑️ Use React.memo when a child component does not need to render again for the same props.
• ☑️ Use useMemo when an expensive calculation is being repeated unnecessarily.
• ☑️ Use useCallback when passing functions to memoized child components and the function reference is causing unnecessary renders.
• ☑️ Split large components into smaller components when it makes the code easier to manage.

For example, if a component has a value that can be calculated from existing props or state, there may be no need to store that calculated value as another state variable.

5. Why Is key Used in Lists?

When we display multiple items using a list in React, we usually use the key prop to give each item a unique identity.

For example:

const users = [

    { id: 1, name: "John" },

    { id: 2, name: "David" },

    { id: 3, name: "Sam" }

];

users.map(user => (

    <div key={user.id}>

        {user.name}

    </div>

));

Here, user.id is used as the key because it is unique for each user.

The key helps React identify which items in a list have been added, removed, or changed. This allows React to update the UI correctly when the list changes.

A common interview follow-up question is: Why shouldn’t we use the array index as the key?

For example:

users.map((user, index) => (

    <div key={index}>

        {user.name}

    </div>

));

Using the index can cause problems when items are added, removed, or rearranged. The index of an item can change even though the item itself has not changed.

For a list that never changes, using an index may not cause an obvious problem. However, when a list can change, a stable and unique ID is generally the better choice.

In simple terms: Use a unique and stable value as the key whenever possible, rather than the array index.

6. Controlled vs Uncontrolled Components

Controlled and uncontrolled components are commonly discussed when working with forms in React.

In a controlled component, the form value is managed by React state. Whenever the user enters something, the state is updated.

const [name, setName] = useState("");

<input

    value={name}

    onChange={(e) => setName(e.target.value)}

/>

Here, React knows the current value of the input through the name state. This makes it easier to validate the input, show messages, or use the value elsewhere in the application.

An uncontrolled component keeps the form value in the DOM instead of managing it with React state. A ref can be used when the value needs to be accessed.

const inputRef = useRef();

<input ref={inputRef} />

The main difference is where the form data is managed:

• ☑️ Controlled component → React state manages the value.
• ☑️ Uncontrolled component → The DOM manages the value.

7. How Do You Fetch Data From an External API?

Front-End applications often need to get data from an external API. In React, one common approach is to use fetch() inside useEffect().

For example:

useEffect(() => {

    fetch("https://example.com/users")

        .then(response => response.json())

        .then(data => {

            setUsers(data);

        });

}, []);

Here, fetch() sends a request to the API. The response is converted into JSON, and the received data is stored in the users state.

A simple example with state would look like this:

const [users, setUsers] = useState([]);

useEffect(() => {

    fetch("https://example.com/users")

        .then(response => response.json())

        .then(data => setUsers(data));

}, []);

The empty dependency array means the effect runs after the component’s initial render.

In a real application, it is also important to handle loading and error states.

For example, while the API request is running, the application can show a loading message. If the request fails, an error message can be displayed.

Freshers should also be familiar with async/await, as it is another common way to write API requests:

useEffect(() => {

    const getUsers = async () => {

        const response = await fetch("https://example.com/users");

        const data = await response.json();

        setUsers(data);

    };

    getUsers();

}, []);

In an interview, the interviewer may ask why the API call is placed inside useEffect. A simple answer is that fetching external data is a side effect, and useEffect is commonly used to perform such work after rendering.

8. How to Use useState Efficiently in a Small Application?

useState is useful for managing data that can change in a React component. In a small application, it is better to keep state simple instead of creating state for every value.

For example, if we are creating a simple counter, we only need one state value:

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

If a form has a few fields, we can either use separate state values or keep related values together.

const [user, setUser] = useState({

    name: "",

    email: ""

});

We should also avoid storing values that can be calculated from existing state.

For example, if we already have:

const [price, setPrice] = useState(100);

const [quantity, setQuantity] = useState(2);

There is usually no need to create another state just for the total. We can calculate it directly:

const total = price * quantity;

This keeps the code simpler and avoids having to keep multiple state values in sync.

9. What Causes an Infinite State Loop?

An infinite state loop can happen when updating a state causes an effect to run again, and that effect updates the same state repeatedly.

For example:

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

useEffect(() => {

    setCount(count + 1);

}, [count]);

Here, the sequence is:

1. ☑️ count changes.
2. ☑️ The useEffect runs because count is in its dependency array.
3. ☑️ The effect calls setCount().
4. ☑️ count changes again.
5. ☑️ The effect runs again.

This continues repeatedly and creates an infinite loop.

Another common mistake is calling a state update directly while rendering:

setCount(count + 1);

This can also cause repeated renders because every render triggers another state update.

To avoid these problems, candidates should understand when state updates happen and how the dependency array of useEffect works.

10. Write the Syntax for useState, useEffect, and useMemo

A Front-End Developer may use React Hooks regularly, so interviewers may ask candidates to write their basic syntax.

useState

useState is used to create and manage state in a component.

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

Here, count is the state value and setCount is the function used to update it.

useEffect

useEffect is used to perform side effects such as API calls or other actions that need to happen after rendering.

useEffect(() => {

    // side effect code

}, []);

The second argument is the dependency array. Its values decide when the effect should run again.

useMemo

useMemo is used to remember the result of a calculation.

const total = useMemo(() => {

    return price * quantity;

}, [price, quantity]);

The calculation runs again when price or quantity changes.

For a fresher, it is important to know not only the syntax but also the purpose of each Hook:

• ☑️ useState → manages state
• ☑️ useEffect → handles side effects
• ☑️ useMemo → remembers a calculated value

These three Hooks are commonly used in React applications, so candidates should be comfortable writing and explaining simple examples of each.

JavaScript Interview Questions For Freshers

11. What Is a Closure?

A closure is created when a function remembers and can access variables from its outer function, even after the outer function has finished running.

For example:

function outer() {

    let count = 0;

    function inner() {

        count++;

        return count;

    }

    return inner;

}

const counter = outer();

console.log(counter());

console.log(counter());

Here, the inner function can still access the count variable from outer().

The first call returns 1, and the second call returns 2. The value of count is remembered between the function calls.

Closures are useful in many areas of JavaScript, such as creating private data, callbacks, and functions that need to remember some information.

12. What Is Event Bubbling and How Can You Stop It?

A closure is created when a function remembers and can access variables from its outer function, even after the outer function has finished running.

For example:

function outer() {

    let count = 0;

    function inner() {

        count++;

        return count;

    }

    return inner;

}

const counter = outer();

console.log(counter());

console.log(counter());

Here, the inner function can still access the count variable from outer().

The first call returns 1, and the second call returns 2. The value of count is remembered between the function calls.

Closures are useful in many areas of JavaScript, such as creating private data, callbacks, and functions that need to remember some information.

13. How Does Object Destructuring Work?

Object destructuring is a JavaScript feature that allows us to take values directly from an object and store them in variables.

For example, consider the following object:

const user = {

    name: "John",

    age: 25,

    mail: "abc@gmail.com"

};

Without destructuring, we would access each value like this:

console.log(user.name);

console.log(user.age);

console.log(user.mail);

Using destructuring, we can write:

const { name, age, mail } = user;

console.log(name);

console.log(age);

console.log(mail);

The values are taken from the object based on their property names.

We can also give a different variable name when needed:

const { name: userName } = user;

console.log(userName);

Object destructuring is commonly used in React when working with props, API responses, and objects.

For example:

function User({ name, age }) {

    return (

        <p>{name} is {age} years old.</p>

    );

}

Here, name and age are taken directly from the component’s props.

14. What Are Common Array Methods and Their Uses?

There are several built-in methods in JavaScript for working with arrays. Front-End Developers use these methods regularly when working with data from APIs, forms, and user interactions.

Some commonly used array methods are:

Array Method	Use
map()	Creates a new array by applying a function to every item
filter()	Creates a new array with items that match a condition
find()	Returns the first item that matches a condition
reduce()	Combines array values into a single result
forEach()	Runs a function for each item
some()	Checks whether at least one item matches a condition
every()	Checks whether all items match a condition
includes()	Checks whether a particular value exists in the array

For example, map() can be used to create a new array:

const numbers = [1, 2, 3];

const doubled = numbers.map(number => number * 2);

console.log(doubled);

Output:

[2, 4, 6]

filter() can be used when we want only certain values:

const numbers = [10, 20, 30, 40];

const result = numbers.filter(number => number > 20);

console.log(result);

Output:

[30, 40]

reduce() is useful when we need one final value from an array, such as finding a total:

const numbers = [10, 20, 30];

const total = numbers.reduce((sum, number) => sum + number, 0);

console.log(total);

Output:

60

15. Find the Total of the Given Array

This is a simple coding question that tests whether the candidate knows how to work with array values.

Consider the following array:

const numbers = [80, 95, 93, 78, 99];

We can use the reduce() method to calculate the total:

const total = numbers.reduce((sum, number) => {

    return sum + number;

}, 0);

console.log(total);

The result is:

445

The reduce() method goes through each number and adds it to the previous total.

The calculation is:

80 + 95 + 93 + 78 + 99 = 445

This type of question may look simple, but interviewers use it to check whether candidates are comfortable with basic JavaScript array operations.

16. How Do You Remove Duplicates From an Array?

Removing duplicate values from an array is another common JavaScript coding question.

Consider this array:

const numbers = [1, 1, 2, 2, 3, 3];

One simple way to remove the duplicates is by using Set.

const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers);

The output will be:

[1, 2, 3]

A Set stores only unique values, so the duplicate numbers are removed. The spread operator … is then used to convert the Set back into an array.

Another approach is to use filter():

const uniqueNumbers = numbers.filter((number, index) => {

    return numbers.indexOf(number) === index;

});

console.log(uniqueNumbers);

This also gives:

[1, 2, 3]

TypeScript Interview Questions For Freshers

17. Interface vs Type

Both interface and type can be used to describe the structure of data in TypeScript.

For example, using an interface:

interface User {

    name: string;

    age: number;

}

The same structure can also be written using a type:

type User = {

    name: string;

    age: number;

};

Both can be used to define the properties that a User should have.

One difference is that interfaces can be extended using extends:

interface User {

    name: string;

}

interface Admin extends User {

    role: string;

}

Types can also be combined using intersections:

type User = {

    name: string;

};

type Admin = User & {

    role: string;

};

There are other differences between interface and type, especially when working with unions, intersections, and declaration merging.

18. What Are Generic Types?

Generics are a feature in TypeScript that allows us to write reusable code while still keeping type information.

For example, consider this function:

function getValue<T>(value: T): T {

    return value;

}

Here, T represents the type of the value. The function can work with different types without having to write a separate function for each type.

For example:

const numberValue = getValue<number>(10);

const nameValue = getValue<string>("John");

In the first example, T is number. In the second example, T is string.

Generics are useful when we want to create reusable functions, components, or other pieces of code that can work with different data types.

Another simple example is an array:

function getFirstItem<T>(items: T[]): T {

    return items[0];

}

This function can work with an array of numbers, strings, or other types.

Tailwind CSS Interview Questions

19. How Do You Use Flex and Grid in Tailwind CSS?

Tailwind CSS provides utility classes for working with Flexbox and CSS Grid.

To use Flexbox, we can add the flex class:

<div class="flex items-center justify-between">

    <div>Item 1</div>

    <div>Item 2</div>

</div>

Here:

• ☑️ flex makes the element a Flexbox container.
• ☑️ items-center aligns the items vertically.
• ☑️ justify-between places space between the items.

For example, Flexbox can be useful when creating a navigation bar where items need to be placed in a row.

CSS Grid can be used when we need to arrange content into rows and columns:

<div class="grid grid-cols-3 gap-4">

    <div>Card 1</div>

    <div>Card 2</div>

    <div>Card 3</div>

</div>

Here, grid-cols-3 creates three columns and gap-4 adds space between the items.

Tailwind also makes responsive layouts easier:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

    ...

</div>

This creates one column on smaller screens, two columns on medium screens, and three columns on larger screens.

A simple way to understand the difference is:

• ☑️ Flexbox → useful for arranging items mainly in one direction, such as a row or column.
• ☑️ Grid → useful for layouts involving rows and columns.

20. How Do You Create a Responsive Card Using Tailwind CSS?

Creating a responsive card is a common practical task for Front-End Developers. The interviewer may want to see whether the candidate understands basic Tailwind classes, spacing, sizing, and responsive design.

A simple card can be created like this:

<div class="w-full max-w-sm rounded-lg border p-4">

    <img

        src="image.jpg"

        alt="Course"

        class="w-full rounded-md"

    />

    <h2 class="mt-4 text-xl font-semibold">

        Front End Development

    </h2>

    <p class="mt-2 text-gray-600">

        Learn the basics of modern front-end development.

    </p>

    <button class="mt-4 rounded-md bg-blue-500 px-4 py-2 text-white">

        Learn More

    </button>

</div>

Some of the classes used here are:

• ☑️ w-full → makes the card use the available width.
• ☑️ max-w-sm → limits the maximum width of the card.
• ☑️ rounded-lg → adds rounded corners.
• ☑️ border → adds a border.
• ☑️ p-4 → adds padding.
• ☑️ w-full on the image → makes the image fit the card width.
• ☑️ mt-4 → adds space above an element.

We can also make a group of cards responsive using Tailwind’s breakpoints:

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">

    <!-- Cards -->

</div>

This displays one card per row on smaller screens, two columns on medium screens, and three columns on larger screens.

What These Front End Developer Interview Questions Test

The 20 questions shared by the Payilagam trainees cover more than just React. They touch on the basic skills that a fresher is expected to have when applying for a Front-End Developer role.

React Fundamentals

The React questions test whether candidates understand basic Hooks, state, rendering, components, API calls, and list handling. Knowing the syntax is useful, but candidates should also be able to explain why and when a particular Hook or approach is used.

JavaScript Basics

JavaScript forms the foundation of front-end development. Questions about closures, event bubbling, destructuring, array methods, totals, and duplicate values check whether candidates are comfortable working with everyday JavaScript code.

TypeScript Knowledge

The TypeScript questions focus on concepts such as interface, type, and generics. These are useful when working on React projects where type safety is important.

CSS and Tailwind Skills

The Tailwind CSS questions check whether candidates can create layouts using Flexbox and Grid and build responsive components for different screen sizes.

Problem-Solving Ability

Some questions do not require a large program. Finding the total of an array or removing duplicate values may look simple, but they help interviewers understand how a candidate approaches a problem and writes JavaScript code.

How Freshers Can Prepare for Front End Developer Interviews?

Preparing for a Front-End Developer interview is not only about reading interview questions. Freshers should spend time understanding the concepts and writing code themselves.

Here are a few simple ways to prepare.

Learn Concepts Instead of Memorizing Definitions

It is easy to memorize a definition of useEffect or a closure. But an interviewer may ask a follow-up question or give a small coding example.

Try to understand what the concept does, why it is used, and where you would use it in a project.

Practice Small Coding Problems

Practice basic JavaScript problems regularly. Start with arrays, strings, objects, loops, functions, and common array methods.

Questions such as finding a total or removing duplicate values are simple, but they can help you become more comfortable with writing code during an interview.

Build Small React Projects

Building projects is one of the better ways to understand React.

You can start with simple projects such as:

• ☑️ To-do application
• ☑️ Weather application
• ☑️ Product listing page
• ☑️ Simple registration form
• ☑️ API-based user list

While building these projects, practice using state, effects, forms, API calls, and reusable components.

Understand JavaScript Fundamentals

Before going deep into React, make sure your JavaScript basics are clear. Topics such as functions, objects, arrays, destructuring, closures, events, promises, and asynchronous code are useful for front-end interviews.

Practice Explaining Your Code

During an interview, you may be asked to explain the code you have written. Practice explaining your solution in simple words.

For example, if you use reduce() to find the total of an array, be ready to explain what the accumulator does and why you provided an initial value.

Practice Responsive Design

If you are using Tailwind CSS, practice creating layouts that work on mobile, tablet, and desktop screens. Learn how Flexbox, Grid, spacing, sizing, and responsive breakpoints work.

For freshers preparing through React Training in Chennai, working on small projects and explaining them clearly can be more useful than simply collecting a large list of interview questions.

The main goal is to become comfortable with the concepts so you can apply them when the interviewer gives you a new problem.

Final Thoughts

The Front-End Developer interview at Sidharth Foundations & Housing Limited covered a good mix of React, JavaScript, TypeScript, and Tailwind CSS questions. The questions ranged from basic concepts such as useState, closures, and array methods to practical topics such as API calls, responsive layouts, and managing re-rendering in React.

The coding questions were also simple enough for freshers to practice on their own. Finding the total of an array and removing duplicate values are small problems, but they can help candidates become more comfortable writing JavaScript during an interview.

These questions shared by the Payilagam trainees can be used as a practice list by freshers preparing for their own Front-End Developer interviews. Instead of memorizing the answers, try writing the examples yourself and understand why each approach works.

For students looking to build practical React skills, React Training in Chennai can provide a structured way to learn the concepts and work on projects before attending interviews. Payilagam, a Best Software Training Institute in Chennai, also focuses on helping learners build the technical knowledge needed for software development roles.

Most importantly, freshers should remember that interview preparation is not about knowing every possible question. Having a clear understanding of the basics, being able to write simple code, and confidently explaining your approach can make a big difference in a technical interview.