1. What is React?

React is a JavaScript library for building user interfaces, particularly for single-page applications where you need a fast, interactive, and dynamic user experience. It is maintained by Facebook and allows developers to build reusable UI components.

2. What are components in React?

In React, components are the building blocks of the UI. A component is a JavaScript function or class that optionally accepts inputs (called props) and returns a React element that describes how a UI should appear. Components can be either functional or class-based.

3. What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript. It looks similar to HTML but allows you to write HTML elements and components in JavaScript. JSX is then compiled into JavaScript by React before the browser can read it.

          
            const element = 
Hello, World!
          
        

4. What is the Virtual DOM?

The Virtual DOM (VDOM) is a lightweight copy of the actual DOM. React uses it to improve performance. When the state of a component changes, React first updates the Virtual DOM, then compares it with the actual DOM (using a process called reconciliation), and finally updates only the parts of the actual DOM that changed. This minimizes direct manipulations of the DOM, improving app performance.

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

• State: State is a mutable object that holds data for a component. State is managed within the component and can be changed using setState(). It is used to track changes in data over time.
• Props: Props are immutable data passed from a parent component to a child component. They are read-only and cannot be modified by the child component. Props allow communication between components.

6. What is a React hook?

React hooks are functions that allow you to use state and other React features in functional components. Prior to hooks, only class components could have state, lifecycle methods, etc. Some common hooks include:

• useState(): For adding state to functional components.
• useEffect(): For performing side effects (like fetching data).
• useContext(): For consuming context data.

7. What is the use of the useEffect hook?

useEffect is a hook in React that allows you to perform side effects in your components. It can be used for tasks like:

• Fetching data from APIs.
• Adding event listeners.
• Directly manipulating the DOM.
• Running cleanup functions.

          
            useEffect(() => {'\n'}
              // Fetch data or perform side effect here{' \n'}
              return () => {'\n'}
                // Cleanup function (optional){'\n'}
            }, [dependencies]);
          
        

8. What is the difference between useState and useReducer?

useState is used for simple state management when you only need to manage a few state variables. useReducer is useful for more complex state logic, especially when the state depends on multiple actions. It’s similar to how Redux works, where you manage the state transitions based on different actions.

          
            const [state, dispatch] = useReducer(reducer, initialState);
          
        

9. What are controlled and uncontrolled components in React?

Controlled Components: In a controlled component, React controls the form element’s value via state. The value of the input is always driven by React state.
Uncontrolled Components: In an uncontrolled component, the form element manages its own state, and React does not track it directly.

          
            const [value, setValue] = useState("");{'\n'}
            const handleChange = (e) => {'\n'}
              setValue(e.target.value);{'\n'}
            return ;
          
        

10. What are keys in React?

Keys are special attributes in React used to identify elements in lists. They help React identify which items have changed, been added, or removed. Keys should be unique to the component they belong to.

          
            const items = ["apple", "banana", "cherry"];

            return (
{items.map((item, index) => (
{item}
))}
);