DEV Community

Dharshini E
Dharshini E

Posted on

React Qustion and Answaer

#react #beginners #javascript #frontend

1)What is the difference between a functional component and a class component in React?

  • In React, both functional components and class components are used to build user interfaces, but they differ in how they are written and how they handle state and lifecycle methods.
  • A functional component is simply a JavaScript function that returns JSX, and with the introduction of hooks like useState and useEffect, it can now handle state and side effects in a clean and concise way.
  • A class component is created using ES6 classes **and **extends React. Component, where state is managed using this.state and updated with this.setState(). Class components also rely on built-in lifecycle methods such as componentDidMount and componentWillUnmount.
  • Functional components are generally shorter, easier to read, and are the modern standard in React development, while class components are more verbose and are mostly found in older codebases.

2)How does JSX work internally? Why do we need it instead of plain JavaScript?

  • JavaScript XML, is a syntax extension used in React that allows developers to write HTML-like code inside JavaScript. Internally, JSX is not understood by browsers; instead, it gets compiled by tools like Babel into plain JavaScript function calls such as React.createElement().
  • For example, writing

    Hello

    in JSX is converted into React.createElement("h1", null, "Hello"), which produces a React element that the Virtual DOM can use to update the UI efficiently.

  • We use JSX because it makes the code more readable, declarative, and closer to HTML, which is familiar to most web developers. Without JSX, we would have to manually call React.createElement() for every element, which becomes harder to maintain in large applications. Thus, JSX acts as a developer-friendly layer that simplifies UI building while still compiling down to efficient JavaScript.
    3)Explain props vs state with an example.

  • In React, props and state are both used to manage data, but they serve different purposes.

  • Props (short for properties) are used to pass data from a parent component to a child component. They are read-only, which means a child component cannot modify the props it receives—it can only display or use them.

  • State, on the other hand, is data that is managed within a component itself. Unlike props, state is mutable and can change over time, usually in response to user actions.
    Example:

function Counter(props) {
  const [count, setCount] = useState(props.initialValue);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Here, initialValue is passed as a prop from the parent, while count is managed as state inside the component.

4)You have a counter that should increase by 2 each time a button is clicked. Why does the following not work? How would you fix it?

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

const handleClick = () => {
  setCount(count => count + 1);
  setCount(count => + 1);
};
Enter fullscreen mode Exit fullscreen mode

5)What is the difference between useRef and useState? When would you choose one over the other?
useState is used when you want React to re-render the UI whenever the value changes. useRef is used to store values that persist between renders but don’t trigger re-renders, and it’s also handy for directly accessing DOM elements. I’d use useState for things like counters shown on screen, and useRef for things like input focus, timers, or values I don’t want to cause a re-render.

6)How can you use useRef to focus an input field when a button is clicked?
The useRef hook allows you to get a reference to a DOM element **in functional components. You can then **call methods on that element, like .focus().
You can use useRef to get a reference to the input element, and then call .focus() on it inside a function that runs on button click. This allows the input field to gain focus programmatically without causing a re-render.

7)Does changing the value of a useRef variable cause re-render? Why?

  • useRef returns a mutable ref object with a .current property.
  • React does not track changes to .current for rendering purposes.
  • Updating ref.current does not tell React to re-render the component because refs are meant to store values that persist across renders without affecting the UI. No, changing a useRef value does not cause re-render because React does not track the .current property for UI updates. It’s mainly used to store persistent values or references to DOM elements without affecting rendering.

8)How would you use useRef to store the previous render’s value of a state?
You can use useRef to store the previous value of a state by updating the ref inside a useEffect that runs after each render. The ref persists across renders without triggering a re-render, so it effectively lets you track the previous state value.

Top comments (0)