DEV Community: David Yao

Top 20 React Interview Questions & Answers

David Yao — Thu, 09 Feb 2023 21:35:02 +0000

React - How to implement useState hook in your application

David Yao — Thu, 09 Feb 2023 09:32:23 +0000

The useState hook is a built-in hook in React that allows you to add state to your functional components. Here is how you can use the useState hook in your React code:

 import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In the code above, we imported the useState hook from the react library and then used it inside the Example component. The useState hook takes an initial state value as an argument, and returns an array containing the current state value and a state update function.

In this example, we initialized the state value with 0 and named it count. The setCount function is used to update the count value. Every time the button is clicked, the setCount function is called with the updated count value.

This is a basic example of how you can use the useState hook in your React components to manage state. You can also use the useState hook to manage more complex state objects and arrays. The idea is the same, you just need to pass the initial state value and use the update function to change the state as needed.

General Use Cases

Managing input values in a form

 import React, { useState } from 'react';

function FormExample() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = event => {
    setInputValue(event.target.value);
  };

  return (
    <form>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Entered value: {inputValue}</p>
    </form>
  );
}

In this example, we are using the useState hook to manage the value of an input field in a form. We initialized the state with an empty string and named it inputValue. The handleChange function is used to update the inputValue state whenever the input value changes.

Managing a toggle state

 import React, { useState } from 'react';

function ToggleExample() {
  const [toggle, setToggle] = useState(false);

  return (
    <div>
      <p>Toggle is {toggle ? "ON" : "OFF"}</p>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
}

In this example, we are using the useState hook to manage a toggle state. We initialized the state with false and named it toggle. The setToggle function is used to update the toggle state whenever the button is clicked.

Managing a list of items

 import React, { useState } from 'react';

function ListExample() {
  const [items, setItems] = useState([
    { id: 1, text: "Item 1" },
    { id: 2, text: "Item 2" },
    { id: 3, text: "Item 3" }
  ]);

  const addItem = () => {
    setItems([...items, { id: items.length + 1, text: `Item ${items.length + 1}` }]);
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add item</button>
    </div>
  );
}

In this example, we are using the useState hook to manage a list of items. We initialized the state with an array of objects and named it items. The addItem function is used to add a new item to the items state whenever the button is clicked.

Hope you guys enjoy reading this article, happy coding 😉

React - How to implement useEffect hook in your application

David Yao — Thu, 09 Feb 2023 09:22:04 +0000

The useEffect hook is a powerful feature in React that allows you to synchronize a component with an external system. It is a hook that lets you tell React what to do after render.

Here is a basic example that demonstrates how to use the useEffect hook:

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Example;

In this example, we are using the useState hook to manage the state of our component. The state count is set to 0 initially.

We then use the useEffect hook to update the document title whenever the count changes. The useEffect hook takes two arguments: a callback function and an array of dependencies. The callback function is the code that we want to run after render, and the array of dependencies is a list of values that we want to watch for changes. In this case, we only want to run the effect when count changes, so we pass [count] as the second argument.

Every time the component re-renders, React will compare the values in the dependency array to their previous values. If any of the values have changed, the effect will run again. If the values have not changed, the effect will not run. This is how React knows when to re-run an effect and when to skip it.

This is just a simple example, but you can use the useEffect hook to perform all sorts of complex logic in your React components, such as fetching data from an API, setting up and cleaning up subscriptions, and more.

USE CASES

Here are a few more examples to illustrate different use cases for the useEffect hook:

Fetching data from an API

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

const Example = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return (
    <div>
      {data ? (
        data.map(post => (
          <div key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </div>
        ))
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default Example;

Setting up and cleaning up a subscription

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

const Example = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div>
      <p>Window width: {width}</p>
    </div>
  );
};

export default Example;

In this example, we are using the useEffect hook to set up and clean up a subscription to the resize event of the window object. The effect runs every time the component re-renders, but we don't need to do anything in the dependency array, because the effect does not depend on any values from props or state. The return value of the effect function is a cleanup function that removes the event listener when the component unmounts.

Updating a value based on a previous value

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

const Example = () => {
  const [count, setCount] = useState(0);
  const [doubleCount, setDoubleCount] = useState(0);

  useEffect(() => {
    setDoubleCount(count * 2);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double Count: {doubleCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Example;

In this example, we are using the useEffect hook to update a value doubleCount based on a previous value count. The effect runs whenever count changes, and we pass [count]

Happy coding! 😊

DEV Community: David Yao

Top 20 React Interview Questions & Answers

Top 20 React Interview Questions & Answers

Q.1 What is React and how does it work?

Q.2 What are the benefits of using React?

Q.3 How does React handle state management?

Q.4 What is the difference between props and state in React?

Q.5 What is the virtual DOM in React and why is it important?

Q.6 What are Higher-Order Components (HOCs) in React?

Q.7 What is the lifecycle method of a React component?

Q.8 Can you explain how React handles performance optimization?

Q.9 What is the difference between server-side rendering and client-side rendering in React?

Q.10 What is a Redux store in React?

Q.11 What is the purpose of the mapStateToProps and mapDispatchToProps functions in React Redux?

Q.12 What is the purpose of the React Router library?

Q.13 Can you explain the concept of hooks in React?

Q.14 Can you explain the concept of context in React?

Q.15 How would you optimize the performance of a React application?

Q.16 What is the Virtual DOM in React?

Q.17 What is the use of the React developer tools browser extension?

Q.18 Can you explain the concept of Higher Order Components (HOCs) in React?

Q.19 What is the purpose of the key prop in React?

Q.20 What is the purpose of the ReactFragment component?

React - How to implement useState hook in your application

General Use Cases

React - How to implement useEffect hook in your application

USE CASES