node, react developer interview travencore analytics 2024

By | 7 months ago

reactinterviewnodekeralacareerskochiinfoparkit jobstravencore analytics

1. What's the difference between a `package-lock.json` file and a `package.json` file?

  • **Answer:**

    • **package.json:** Contains a project's metadata like dependencies, version, scripts, etc. It's the main file to define required packages.

    • **package-lock.json:** Automatically generated, this file locks the specific versions of each dependency and its dependencies, ensuring consistency across installs.

2. What is `npm --force` install?

  • **Answer:** The `--force` flag in `npm install` forces a package to install even if there's an error or existing conflicting versions. This is useful for troubleshooting but might introduce inconsistencies.

3. How can you update a parent's width from a child in React?

  • **Answer:** You can achieve this by passing a function from the parent component as a prop to the child. The child will invoke the function with the new width value, allowing the parent to update its state:

// Parent Component

function Parent() {

    const [width, setWidth] = useState(100);

    

    const updateWidth = (newWidth) => setWidth(newWidth);

    

    return (

        <div style={{ width }}>

            <Child updateWidth={updateWidth} />

        </div>

    );

}

// Child Component

function Child({ updateWidth }) {

    const changeWidth = () => updateWidth(200);

    return <button onClick={changeWidth}>Change Parent Width</button>;

}

4. How does `useCallback` work in React?

  • **Answer:** `useCallback` is a hook that returns a memoized version of a function, which only changes if one of its dependencies change. It improves performance by preventing re-creation of functions in each render.

const memoizedCallback = useCallback(() => {

    // Function logic

}, [dependency]);

5. How does `React.memo` work?

  • **Answer:** `React.memo` is a higher-order component that prevents re-renders of functional components unless their props have changed. This optimizes rendering, particularly for expensive computations.

6. How does `useRef` work in React?

  • **Answer:** `useRef` creates a mutable object that persists across renders without causing re-renders when changed. It's commonly used for DOM references or to store mutable values.

const myRef = useRef(null);

// Assign to an element's ref attribute

<div ref={myRef}></div>

7. What is the difference between `Promise.all` and Promise.allSettled?

  • **Answer:**

    • **Promise.all:** Resolves only if all promises resolve. Rejects if any promise rejects.

    • **Promise.allSettled:** Waits for all promises to settle (resolve or reject) and returns an array of results for each.

8. What is CORS, and what is its syntax?

  • **Answer:** Cross-Origin Resource Sharing (CORS) allows controlled cross-origin requests to an API. It defines permitted domains, methods, and headers via HTTP headers like:

Access-Control-Allow-Origin: https://example.com

Access-Control-Allow-Methods: GET, POST, PUT

9. How do cookies work in a web application?

  • **Answer:** Cookies are key-value pairs stored in the browser. They are used for authentication, preferences, etc., and are sent to the server with each request. Cookies have attributes like `HttpOnly, SameSite, and Secure` for enhanced security.

10. How does authentication work in web applications?

  • **Answer:** Authentication typically involves verifying user credentials and issuing an authentication token (e.g., JWT, session ID). This token is then validated with each subsequent request to confirm the user's identity.

11. How do you log out a user from the server side?

  • **Answer:** Invalidate or remove the session or token server-side:

  • **Session-based:** Destroy the session on the server and delete the session cookie client-side.

  • **Token-based:** Expire the token by blacklisting it in the server or removing it from the client.

12. How do you upload a large-sized file in web applications?

  • **Answer:**

  • **Chunked Uploads:** Split files into smaller chunks and upload each sequentially.

  • **Resume Capability:** Implement resume functionality using checksums or offsets.

  • **Streaming:** Process the file stream as it's uploaded to reduce memory usage.

13. What are some common HTTP error codes?

  • **Answer:**

  • **400 (Bad Request):** Invalid client request.

  • **401 (Unauthorized):** No valid authentication credentials.

  • **403 (Forbidden):** Insufficient permissions.

  • **404 (Not Found):** Resource not found.

  • **500 (Internal Server Error):** Generic server-side error.

14. How does Babel work?

  • **Answer:** Babel is a JavaScript compiler that transpiles modern JavaScript code into older versions compatible with most browsers. It uses plugins and presets to transform code based on the specified environment.

15. How does routing work in Next.js?

  • **Answer:** In Next.js, routing is file-based. Pages are defined in the `pages` folder, and Next.js automatically sets up routing for them. Dynamic routes are created using square brackets ([id].js).

16. What are the advantages of Next.js?

  • **Answer:** Advantages include:

  • **Server-Side Rendering (SSR):** Improved SEO and initial load speed.

  • **Static Site Generation (SSG):** Efficiently pre-renders static pages at build time.

  • **API Routes:** Serverless API endpoints built into the framework.

  • **File-based Routing:** Simplifies page routing.

17. How do you make a page client-side in Next.js?

  • **Answer:** Client-side pages in Next.js can leverage dynamic imports, conditional rendering, or React state for dynamic interactivity. Simply create a component and use client-side hooks like useState, useEffect, or useReducer.

import { useState } from 'react';

function ClientSidePage() {

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

    return (

        <div>

            <h1>Client-Side Counter: {count}</h1>

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

        </div>

    );

}

export default ClientSidePage;