React.js Interview Questions (Part 1)

Photo by Lautaro Andreani on Unsplash

ReactJS is one of the most popular JavaScript libraries for building user interfaces. With its growing popularity, the demand for ReactJS developers has also increased rapidly. As a ReactJS developer, it is important to stay ahead of the curve and be prepared for any interview questions that may come your way.

In this article, we will explore some of the interview questions that you may encounter as a ReactJS developer, along with tips and insights on how to answer them. From fundamental concepts to advanced topics, this article will help you prepare for any ReactJS interview with confidence.

Let’s start with our first question…

Q. 1) How to render data (from the below example) like a string which includes some styling and html in react.js?

import "./styles.css";

const data = '<h2 style="color:blue">Some useful content</h2>';

export default function App() {
  return (
    <div className="App"></div>
  );
}

Think for a minute or two…!

Answer:

In React, you can render HTML content within a component by using the dangerouslySetInnerHTML property. This property allows you to inject raw HTML into the element, which is often useful when rendering user-generated content. However, it’s important to be careful when using this property, as it could introduce security vulnerabilities to your application if not used properly. Here is an example of how to use it:

import "./styles.css";

const data = "<h2 style='color:blue;'>Some useful content</h2>";

export default function App() {
  return (
    <div className="App">
      <div dangerouslySetInnerHTML={{ __html: data }} />
    </div>
  );
}

Note: Another alternative is to use a library like React-Markdown to convert the string into a React component, which would automatically handle the styling and HTML for you in a safer way.

Q. 2) What solution do you apply to the code below to ensure the loader is on when the API call is initiated?

const [loading, setLoading] = useState(false);

setLoading(true);
doAPICall();

Think for a minute or two…!

Answer:

Use the useEffect hook to ensure that doAPICall() is invoked only after a successful change in the loading value.

const [loading, setLoading] = React.useState(false);

useEffect(() => {
  const fetchData = async () => {
    setLoading(true);
    // doAPICall uisng await
    setLoading(false);
  };
  fetchData();
}, []);

We’re calling the fetchData function inside the useEffect hook and pass an empty dependency array to ensure that, it's only called once when the component is mounted.

Q. 3) Which of the following is TRUE about the below source code?

function Child() {
  return <div>This is children content</div>;
}

function Parent({ children }) {
  return (
    <div>
      <h3>Parent Component</h3> {children}{" "}
    </div>
  );
}

function App() {
  return (
    <Parent>
      <Child />
    </Parent>
  );
}

Error
Rendering the components dynamically
Dynamically add a child component
It is a HOC component
None of the above

Think for a minute or two…!

Answer:

Option 2 is the correct answer which is “Rendering the components dynamically”. By passing a Child component as a child prop to the Parent component, we are rendering the Child component inside the Parent component’s div dynamically.

NOTE: The key point is this question is the difference between the option 2 and option 3.

“Rendering the components dynamically” means that a component is being rendered dynamically based on some condition or prop value. In the given code, the Child component is rendered dynamically inside the Parent component by passing it as a child prop to the Parent component.
On the other hand, “Dynamically adding a child component” means that a new component is being added dynamically to the component tree based on some event or user action. This is typically done by changing the state of the component, which triggers a re-render and adds the new component to the tree.
In the given code, the Child component is not being dynamically added to the tree based on any event or user action. It is simply being passed as a child prop to the Parent component and rendered dynamically. Therefore, the more accurate term to describe what is happening in this code is “Rendering the components dynamically”.

Q. 4) Here is a snippet from a functional React component, that will load user’s data from the API.getUserData() method, and store it in the component’s state. What part of this code should be avoided or shouldn’t be done this way at all?

  const [user, setUser] = React.useState({});

  React.useEffect(() => {
    async function fn() {
      const user = await getUserData();
      setUser(user);
    }
    fn();
  }, [user]);

Think for a minute or two…!

Answer:

The issue with the given code is that the ‘user’ state variable is being used as a dependency in the useEffect hook. This can cause an infinite loop of re-renders because every time the ‘user’ state is updated, the useEffect hook will run again. Instead, the dependency should be removed, and the useEffect hook should only run once when the component mounts to fetch the user data.

Q. 5) Which name should this React hook have?

function somehook(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}

weakReference
useWeakReference
clone
previous
usePrevious
useShallowCopy

Think for a minute or two…!

Answer:

The name that best fits this React hook is 5. usePrevious. This is because the hook returns the previous value of the input parameter value. The convention in React is to use the prefix "use" for custom hooks that use built-in hooks, such as useRef and useEffect, which this hook does.

Q. 6) How would this React component behave?

function MyComponent() {
  const aListener = React.useMemo(alert, []);
  const bListener = React.useCallback(alert, []);
  return (
    <>
      <button onClick={aListener}>A</button>
      <button onClick={bListener}>B</button>
    </>
  );
}

It will display an empty alert on “mount”
It won’t do anything
It will alert [Object, Object] on the “B” button press
It will alert [Object, Object] on the “A” button press

Think for a minute or two…!

Answer:

This React component, named MyComponent, will display:

i) An empty alert on "mount".

ii) It will alert [object Object] on both the "B" button press.

The reason why the alert the message is not popping up when the "A" button is clicked because the hook useMemo is returning the value of the alert function, not the function itself.

The useMemo hook memoizes the result of the function and returns that result, whereas the useCallback hook memoizes the function itself and returns it.

The aListener and bListener functions are both created using either the useMemo or useCallback hooks with the alert function as the first argument and an empty array as the second argument. This means that both functions will be created only once when the component is mounted, and they will return a memoized version of the function alert that is optimized for performance.

That’s it, I hope you find it helpful.