Conceptual Exercise

Answer the following questions below:

• What is React? When and why would you use it?

  • React is a JavaScript library for building user interfaces, especially single-page applications. It enables developers to build reusable UI components, managing the state and rendering efficiently. React is typically used when you need fast, interactive UIs and modular component-based architecture.

• What is Babel?

  • Babel is a JavaScript compiler that allows developers to use modern JavaScript syntax and features in older environments that do not natively support them. It transforms ES6+ code into backwards-compatible JavaScript.

• What is JSX?

  • JSX stands for JavaScript XML, a syntax extension for JavaScript. It allows developers to write HTML-like code within JavaScript, which is then transformed into React elements. JSX improves the readability and maintainability of React components.

• How is a Component created in React?

  • A React component can be created either as a function or a class. Functional components use functions and return JSX, while class components extend from React.Component and must have a render() method that returns JSX.

• What are some differences between state and props?

  • State is a local data store specific to a component and can be changed within that component.
  • Props are immutable data passed from a parent component to a child component, used for rendering UI without direct modification.

• What does "downward data flow" refer to in React?

  • "Downward data flow" means that data in React always flows from parent components to child components through props. This ensures that only the parent can update the data.

• What is a controlled component?

  • A controlled component is one whose form data (input, select, etc.) is controlled by the React component's state. The component’s state dictates the value of the form elements.

• What is an uncontrolled component?

  • An uncontrolled component is one where the form data is handled by the DOM directly. Instead of updating the state on input changes.

• What is the purpose of the key prop when rendering a list of components?

  • The key prop helps React identify which elements have changed, been added, or removed from a list.

• Why is using an array index a poor choice for a key prop when rendering a list of components?

  • Using an array index as the key can lead to inefficient rendering, especially if the list items are reordered.

• Describe useEffect. What use cases is it used for in React components?

  • useEffect is a hook that allows developers to perform side effects in function components, such as fetching data, setting up subscriptions, or manually changing the DOM. It runs after every render by default but can be controlled by specifying dependencies.

• What does useRef do? Does a change to a ref value cause a rerender of a component?

  • useRef provides a way to persist values across renders without triggering a re-render. Changes to a ref value do not cause the component to re-render.

• When would you use a ref? When wouldn't you use one?

  • Use refs when you need to directly access or manipulate DOM elements, or maintain values that persist between renders but shouldn't trigger a rerender.
  • Do not use refs to store data that affects rendering; use state instead.

• What is a custom hook in React? When would you want to write one?

  • A custom hook is a reusable function that extracts component logic, such as state or side effects, into a separate function. You would write one to encapsulate logic that’s shared between components, making your code easier to maintain.