fullstack or mernstack developer interview questions and answers 2024 infenox

Technical Questions and Answers

1. Provide the complete code for a React counter based on button clicks.


import React, { useState } from 'react';

function Counter() {

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

    const increment = () => setCount(count + 1);

    const decrement = () => setCount(count - 1);

    return (

        <div>

            <h1>Count: {count}</h1>

            <button onClick={increment}>Increment</button>

            <button onClick={decrement}>Decrement</button>

        </div>

    );

}

export default Counter;

2. How do you reverse an array of characters?


function reverseCharacters(arr) {

    return arr.reverse();

}

// Example usage:

const chars = ['a', 'b', 'c', 'd'];

console.log(reverseCharacters(chars)); // ['d', 'c', 'b', 'a']

3. How do you remove duplicates from an array of characters?


function removeDuplicates(arr) {

    return [...new Set(arr)];

}

// Example usage:

const chars = ['a', 'b', 'c', 'a', 'b'];

console.log(removeDuplicates(chars)); // ['a', 'b', 'c']

4. What is an Event Loop in JavaScript?

**Answer:** The Event Loop is a mechanism that enables JavaScript to handle asynchronous events. It continuously checks the call stack and the callback queue. When the stack is empty, the event loop pushes the next callback from the queue to the stack, facilitating non-blocking I/O operations.

5. How do Promises work in JavaScript?

**Answer:** Promises provide a clean way to handle asynchronous operations by representing a value that may be available in the future. Promises have three states: `pending, resolved, and rejected. then` and `catch` methods allow chaining actions after a promise is resolved or rejected.

6. How do you use `useContext` in React?


import React, { useContext } from 'react';

const MyContext = React.createContext('Default Value');

function ChildComponent() {

    const value = useContext(MyContext);

    return <p>Value from context: {value}</p>;

}

function ParentComponent() {

    return (

        <MyContext.Provider value="Provided Value">

            <ChildComponent />

        </MyContext.Provider>

    );

}

export default ParentComponent;

7. What are some common packages used in React?

**Answer:** Common packages include:
`axios` - for HTTP requests
`redux` - for state management
`react-router-dom` - for routing
`formik` or `react-hook-form` - for form handling
`styled-components` - for component-based styling

8. How does MongoDB Aggregation work?

**Answer:** MongoDB Aggregation processes data records through a pipeline of stages like $match, $group, $sort, and $project. Each stage applies specific transformations. For example, a pipeline that matches documents with a condition and groups them:


db.collection.aggregate([

    { $match: { status: 'active' } },

    { $group: { _id: '$category', count: { $sum: 1 } } }

]);

9. How would you design a schema where users receive a free coupon only once when buying something?

**Answer:** A sample schema in MongoDB could have two collections:


// users collection

{

    "_id": "user123",

    "name": "Alice",

    "hasReceivedCoupon": false

}

// purchases collection

{

    "_id": "purchase123",

    "userId": "user123",

    "items": [...],

    "receivedCoupon": false

}

When a user makes a purchase, check their `hasReceivedCoupon` status. If false, issue the coupon and set it to true.

10. What optimizations can be made in React?

**Answer:**

**Memoization:** Use `React.memo` and `useMemo` to cache expensive computations.
**Lazy Loading:** Split code with `React.lazy` and Suspense.
**Event Delegation:** Reduce unnecessary event listeners by delegating them.
**Avoid Re-Renders:** Use `shouldComponentUpdate` or `React.PureComponent` for selective rendering.

11. Have you done any class-to-function conversions in React?

**Answer:** Yes, class components with state and lifecycle methods can be converted to function components using hooks like `useState` and useEffect.
**Example (Class Component to Function Component):**

Class Component:


class Timer extends React.Component {

    state = { time: 0 };

    componentDidMount() {

        this.interval = setInterval(() => this.setState({ time: this.state.time + 1 }), 1000);

    }

    componentWillUnmount() {

        clearInterval(this.interval);

    }

    render() {

        return <div>Time: {this.state.time}</div>;

    }

}

Function Component:


import React, { useState, useEffect } from 'react';

function Timer() {

    const [time, setTime] = useState(0);

    useEffect(() => {

        const interval = setInterval(() => setTime(time => time + 1), 1000);

        return () => clearInterval(interval);

    }, []);

    return <div>Time: {time}</div>;

}

export default Timer;