{"id":136308,"date":"2024-06-25T03:11:03","date_gmt":"2024-06-25T03:11:03","guid":{"rendered":"https:\/\/www.sushilkumar.ind.in\/blog\/?page_id=136308"},"modified":"2024-06-26T11:16:43","modified_gmt":"2024-06-26T11:16:43","slug":"reactjs-high-level-interview-question-and-answer","status":"publish","type":"page","link":"https:\/\/www.sushilkumar.ind.in\/blog\/reactjs-high-level-interview-question-and-answer\/","title":{"rendered":"ReactJS high-level interview question and answer"},"content":{"rendered":"\n

What is HOC(Higher order component)?<\/h2>\n\n\n\n

A Higher Order Component (HOC) in React is a pattern where a function takes a component and returns a new component with enhanced functionality. It’s a way to reuse component logic.<\/p>\n\n\n\n

Example:<\/strong><\/p>\n\n\n\n

import React from 'react';\n\n\/\/ Higher Order Component function\nconst withUpperCase = (WrappedComponent) => {\n  \/\/ Return a functional component\n  return function WithUpperCase(props) {\n    const { text } = props;\n    const upperCaseText = text.toUpperCase();\n\n    \/\/ Render the WrappedComponent with enhanced props\n    return <WrappedComponent {...props} upperCaseText={upperCaseText} \/>;\n  };\n};\n\n\/\/ Example function component to be enhanced\nconst DisplayText = ({ text, upperCaseText }) => {\n  return (\n    <div>\n      <p>Original Text: {text}<\/p>\n      <p>Uppercase Text: {upperCaseText}<\/p>\n    <\/div>\n  );\n};\n\n\/\/ Enhance DisplayText with withUpperCase HOC\nconst DisplayTextWithUpperCase = withUpperCase(DisplayText);\n\n\/\/ Usage example\nconst App = () => {\n  return (\n    <div>\n      <DisplayTextWithUpperCase text=\"Hello, World!\" \/>\n    <\/div>\n  );\n};\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
In this example:\n\nwithUpperCase is a Higher Order Component that takes a function component (DisplayText) as an argument and returns a new function component (WithUpperCase).\nWithUpperCase function component computes upperCaseText by converting text prop to uppercase and then renders the WrappedComponent (DisplayText) with this enhanced prop.\nDisplayText is a simple function component that displays both the original and uppercase text.\nDisplayTextWithUpperCase is the enhanced component created by applying the withUpperCase HOC to DisplayText.\nApp component demonstrates the usage of DisplayTextWithUpperCase.\nThis example showcases how you can create a Higher Order Component for a function component using a functional approach with hooks like useState or useEffect as needed.<\/code><\/pre>\n\n\n\n
Higher Order Components allow for separation of concerns and reusability of component logic across different parts of your application.<\/p>\n\n\n\n
Concepts of shallow copy and deep copy with simple examples in JavaScript.<\/h2>\n\n\n\n
Shallow Copy:<\/strong><\/p>\n\n\n\n
A shallow copy means constructing a new collection object and then populating it with references to the child objects found in the original. In essence, it creates a new object, but the nested objects within it are still referenced from the original object. Shallow copies duplicate as little as possible.<\/p>\n\n\n\n
Example of Shallow Copy:<\/strong><\/p>\n\n\n\n
\/\/ Original object\nconst originalObject = {\n  name: 'John',\n  age: 30,\n  address: {\n    city: 'New York',\n    country: 'USA'\n  }\n};\n\n\/\/ Creating a shallow copy using Object.assign() or spread operator\nconst shallowCopy = { ...originalObject };\n\n\/\/ Modifying the shallow copy\nshallowCopy.name = 'Alice';\nshallowCopy.address.city = 'San Francisco'; \/\/ This will affect the originalObject's address as well\n\nconsole.log(originalObject);\nconsole.log(shallowCopy);\n<\/code><\/pre>\n\n\n\n
    \n
  • <\/li>\n<\/ul>\n\n\n\n
    In the example above:\n\noriginalObject has a nested address object.\nshallowCopy is created using the spread operator (...) to shallowly copy originalObject.\nModifying shallowCopy.name affects only shallowCopy, but modifying shallowCopy.address.city also affects originalObject because the address object is shared (not deeply copied).<\/code><\/pre>\n\n\n\n
    Deep Copy:<\/strong><\/p>\n\n\n\n
    A deep copy, on the other hand, creates a new collection object and recursively adds copies of nested child objects found in the original. It means duplicating every level of nested objects, so changes in the copy do not affect the original.<\/p>\n\n\n\n
    Example of Deep Copy:<\/strong><\/p>\n\n\n\n
    \/\/ Original object\nconst originalObject = {\n  name: 'John',\n  age: 30,\n  address: {\n    city: 'New York',\n    country: 'USA'\n  }\n};\n\n\/\/ Creating a deep copy using JSON methods (stringify and parse)\nconst deepCopy = JSON.parse(JSON.stringify(originalObject));\n\n\/\/ Modifying the deep copy\ndeepCopy.name = 'Alice';\ndeepCopy.address.city = 'San Francisco'; \/\/ This will NOT affect the originalObject's address\n\nconsole.log(originalObject);\nconsole.log(deepCopy);\n<\/code><\/pre>\n\n\n\n
    In this example:\n\ndeepCopy is created by first converting originalObject to a JSON string (JSON.stringify(originalObject)), then parsing it back into an object (JSON.parse(...)). This ensures that all nested objects are deeply copied.\nModifying deepCopy.name or deepCopy.address.city does not affect originalObject because all nested objects are separate instances.<\/code><\/pre>\n\n\n\n
    Key Differences:<\/strong><\/p>\n\n\n\n
      \n
    • Shallow Copy:<\/strong> Only the immediate properties of the object are duplicated, including references to nested objects. Changes to nested objects in the shallow copy affect the original object.<\/li>\n\n\n\n
    • Deep Copy:<\/strong> All properties and nested objects are duplicated recursively, ensuring changes to the copy do not affect the original object.<\/li>\n<\/ul>\n\n\n\n
      How to pass data child to parent component in react?<\/h2>\n\n\n\n
      In React, passing data from a child component to a parent component involves lifting state up from the child to the parent. This is necessary because React’s data flow is typically unidirectional (from parent to child). Here\u2019s how you can achieve this:<\/p>\n\n\n\n
      Method 1: Callbacks as Props<\/h3>\n\n\n\n
      The most common way to pass data from child to parent in React is by passing a callback function as a prop from the parent to the child. The child component can then call this callback function and pass data back to the parent.<\/p>\n\n\n\n
      Parent Component:<\/strong><\/p>\n\n\n\n
      import React, { useState } from 'react';\nimport ChildComponent from '.\/ChildComponent';\n\nconst ParentComponent = () => {\n  const [dataFromChild, setDataFromChild] = useState('');\n\n  \/\/ Callback function to receive data from child\n  const handleDataFromChild = (data) => {\n    setDataFromChild(data);\n  };\n\n  return (\n    <div>\n      <h2>Parent Component<\/h2>\n      <p>Data from Child: {dataFromChild}<\/p>\n      <ChildComponent sendDataToParent={handleDataFromChild} \/>\n    <\/div>\n  );\n};\n\nexport default ParentComponent;\n<\/code><\/pre>\n\n\n\n
      Child Component (ChildComponent):<\/strong><\/p>\n\n\n\n
      import React from 'react';\n\nconst ChildComponent = ({ sendDataToParent }) => {\n  const handleClick = () => {\n    \/\/ Simulating data passed from child to parent\n    const data = 'Data sent from child component';\n    sendDataToParent(data); \/\/ Call the callback function from props\n  };\n\n  return (\n    <div>\n      <h3>Child Component<\/h3>\n      <button onClick={handleClick}>Send Data to Parent<\/button>\n    <\/div>\n  );\n};\n\nexport default ChildComponent;\n<\/code><\/pre>\n\n\n
      Explanation:<\/h3>\n
        \n
      1. \n
        Parent Component:<\/strong><\/p>\n
          \n
        • Defines a state variable dataFromChild<\/strong> to store data received from the child.<\/li>\n
        • Declares a callback function handleDataFromChild<\/strong> that updates dataFromChild<\/strong> with the received data.<\/li>\n
        • Passes handleDataFromChild<\/strong> as a prop (sendDataToParent<\/strong>) to the ChildComponent<\/strong>.<\/li>\n<\/ul>\n<\/li>\n
        • \n
          Child Component:<\/strong><\/p>\n
            \n
          • Receives sendDataToParent<\/strong> as a prop from the parent.<\/li>\n
          • Defines an event handler (handleClick<\/strong>) that triggers when a button is clicked (or any other event occurs).<\/li>\n
          • Inside handleClick<\/strong>, it calls sendDataToParent<\/strong> with the data you want to pass back to the parent.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n
            Alternative Methods:<\/h3>\n\n\n\n
              \n
            • Context API:<\/strong> For passing data through multiple layers of components without manually passing props down through each level.<\/li>\n\n\n\n
            • State Management Libraries (like Redux):<\/strong> For managing global state and sharing data between components without relying on direct parent-child relationships.<\/li>\n<\/ul>\n\n\n\n
              What is Controlled and uncontrolled components in react with example?<\/h2>\n\n\n\n
              Controlled Components<\/h3>\n\n\n\n
              Controlled components are React components that manage their state internally and update it based on user input. They receive their current value through props and notify changes through callbacks like onChange<\/code>.<\/p>\n\n\n\n
              Example:<\/strong><\/p>\n\n\n\n
              import React, { useState } from 'react';\n\nfunction ControlledInput() {\n  const [value, setValue] = useState('');\n\n  const handleChange = (event) => {\n    setValue(event.target.value);\n  };\n\n  return (\n    <input\n      type=\"text\"\n      value={value}\n      onChange={handleChange}\n    \/>\n  );\n}\n\nexport default ControlledInput;\n<\/code><\/pre>\n\n\n\n
              Explanation:<\/strong><\/p>\n\n\n\n
                \n
              • The ControlledInput<\/strong> component uses the useState<\/strong> hook to maintain the value<\/strong> state internally.<\/li>\n\n\n\n
              • The <input><\/strong> element is controlled because its value is determined by the value<\/strong> state variable.<\/li>\n\n\n\n
              • handleChange<\/strong> function updates the value<\/strong> state whenever the input changes, ensuring that React manages and reflects the current state of the input field.<\/li>\n<\/ul>\n\n\n\n
                Uncontrolled Components<\/h3>\n\n\n\n
                Uncontrolled components in React rely on the DOM to manage and store their state. They often use refs to directly access the DOM elements to retrieve their current values.<\/p>\n\n\n\n
                Example:<\/strong><\/p>\n\n\n\n
                import React, { useRef } from 'react';\n\nfunction UncontrolledInput() {\n  const inputRef = useRef(null);\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    console.log(inputRef.current.value); \/\/ Accessing input value directly\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input\n        type=\"text\"\n        ref={inputRef}\n      \/>\n      <button type=\"submit\">Submit<\/button>\n    <\/form>\n  );\n}\n\nexport default UncontrolledInput;\n<\/code><\/pre>\n\n\n\n
                  \n
                • Explanation:<\/strong>\n
                    \n
                  • The UncontrolledInput<\/strong> component uses a ref (inputRef<\/strong>) to directly access the DOM node of the input element.<\/li>\n\n\n\n
                  • When the form is submitted, handleSubmit<\/strong> function logs the current value of the input directly from the DOM using inputRef.current.value<\/strong>.<\/li>\n\n\n\n
                  • React does not manage the state of the input field; it’s managed by the DOM itself, making it an uncontrolled component.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                    Key Differences:<\/h3>\n\n\n\n
                      \n
                    • State Management:<\/strong> Controlled components manage state within React components using state variables (like useState<\/strong>).<\/li>\n\n\n\n
                    • DOM Interaction:<\/strong> Uncontrolled components rely on direct DOM manipulation and typically use refs to interact with DOM nodes.<\/li>\n\n\n\n
                    • Event Handling:<\/strong> Controlled components use React’s synthetic events (onChange<\/strong>, onClick<\/strong>) to handle user interactions. Uncontrolled components may use traditional DOM events (onSubmit<\/strong>, onClick<\/strong>) and directly access DOM properties like value<\/strong>.<\/li>\n<\/ul>\n\n\n\n
                      Write a simple React program that fetches data from an API, displays it in a table, and allows users to delete individual records by clicking a delete button next to each row.<\/h2>\n\n\n\n
                      import React, { useState, useEffect } from 'react';\n\nconst DataTable = () => {\n  const [data, setData] = useState([]);\n\n  useEffect(() => {\n    fetchData();\n  }, []);\n\n  const fetchData = async () => {\n    try {\n      const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/users');\n      if (!response.ok) {\n        throw new Error('Network response was not ok');\n      }\n      const json = await response.json();\n      setData(json);\n    } catch (error) {\n      console.error('Error fetching data: ', error);\n    }\n  };\n\n  const handleDelete = (id) => {\n    const updatedData = data.filter((item) => item.id !== id);\n    setData(updatedData);\n  };\n\n  return (\n    <div>\n      <h2>Users<\/h2>\n      <table>\n        <thead>\n          <tr>\n            <th>Name<\/th>\n            <th>Email<\/th>\n            <th>Company<\/th>\n            <th>Action<\/th>\n          <\/tr>\n        <\/thead>\n        <tbody>\n          {data.map((user) => (\n            <tr key={user.id}>\n              <td>{user.name}<\/td>\n              <td>{user.email}<\/td>\n              <td>{user.company.name}<\/td>\n              <td>\n                <button onClick={() => handleDelete(user.id)}>Delete<\/button>\n              <\/td>\n            <\/tr>\n          ))}\n        <\/tbody>\n      <\/table>\n    <\/div>\n  );\n};\n\nexport default DataTable;\n<\/code><\/pre>\n\n\n\n
                      Explanation:<\/h3>\n\n\n\n
                        \n
                      • DataTable Component<\/strong>:\n
                          \n
                        • useState<\/strong>: data<\/strong> state holds the fetched user data from the API.<\/li>\n\n\n\n
                        • useEffect<\/strong>: Fetches data from https:\/\/jsonplaceholder.typicode.com\/users<\/code> when the component mounts.<\/li>\n\n\n\n
                        • fetchData<\/strong>: Fetches data from the API and updates the data<\/strong> state.<\/li>\n\n\n\n
                        • handleDelete<\/strong>: Removes a user from the data<\/strong> state array when the delete button is clicked.<\/li>\n\n\n\n
                        • Render<\/strong>: Maps over the data<\/strong> array to display each user in a table row. Each row has a delete button that calls handleDelete<\/strong> with the user’s id<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                        • App Component<\/strong>:\n
                            \n
                          • Imports and renders the DataTable<\/strong> component, which encapsulates the table and delete functionality.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                            Notes:<\/h3>\n\n\n\n
                              \n
                            • This example uses fetch<\/code> for making HTTP requests. You can replace the URL in fetchData<\/code> with your own API endpoint.<\/li>\n\n\n\n
                            • Error handling for the fetch operation and other edge cases (like empty responses) should ideally be added for production-ready applications.<\/li>\n\n\n\n
                            • Ensure you handle state updates and API interactions according to your application’s requirements and best practices.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
                              What is HOC(Higher order component)? A Higher Order Component (HOC) in React is a pattern where a function takes a component and returns a new component with enhanced functionality. It’s a way to reuse component logic. Example: import React from ‘react’; \/\/ Higher Order Component function const withUpperCase = (WrappedComponent) => { \/\/ Return a …<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-136308","page","type-page","status-publish",""],"acf":[],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P99pkJ-zsw","_links":{"self":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/pages\/136308"}],"collection":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/comments?post=136308"}],"version-history":[{"count":16,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/pages\/136308\/revisions"}],"predecessor-version":[{"id":136336,"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/pages\/136308\/revisions\/136336"}],"wp:attachment":[{"href":"https:\/\/www.sushilkumar.ind.in\/blog\/wp-json\/wp\/v2\/media?parent=136308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}