On Day 23, let's cover the topic of React components. Again, these serve more as notes for me, but I would love for them to be helpful to someone else.

Describe the difference between functional components and class components in React. When would you use one over the other?

Functional components are defined as Javascript functions that return JSX. They are stateless by default and do not have their own internal state or lifecycle methods. They are typically simpler and more concise. They are easier to read and understand, making them preferred by many developers. They are reusable and composable components, allowing hooks to encapsulate logic and behavior. Hooks like useState, useEffect, and useContext enable functional components to manage state and side effects effectively,

Class components are components defined as Javascript classes that extend the 'React.Component' class. These components were the primary way of creating components in older versions of React. Although functional components are the preferred method, there will be times when class components are needed.

• When you are working on a project with older codebases that use class components.

• You interact with legacy code or libraries that rely on class components

• When you need access to specific lifecycle methods that aren't available in functional components.

Explain React fragments and their use cases

React fragments allow you to group multiple React elements without adding extra DOM elements to the output. Fragments are a way to return multiple child elements from a component without wrapping them in a parent container. They keep the DOM structure clean and avoid unnecessary nesting.

When to use React fragments:

• Grouping Multiple Elements

• Conditional Rendering

• Portals

• Returning Adjacent JSX elements

What is a controlled component in React, and why is it important?

A controlled component in React is a form element ( input, textarea, or select) whose value is controlled by the component's state.

Key characteristics of a controlled component:

• Value is controlled by state - value of the form element is stored in the component's state, and it's set and updated using the 'setState' method

• Event Handlers - they typically have event handlers that update the state whenever the user interacts wit the form element

• Immutable State - state is immutable, so you don't directly modify the state, instead you create a new state object with the updated value

• Single source of Truth - component's state is the single source of truth for the value of the input element. It ensures that the UI always reflects the current state.

Why are controlled components important:

• Predictable Behavior - ensures that the form elements behave predictably and consistently with React's rendering and updating cycle.

• Ease of Testing - can directly manipulate their state and simulate user interactions through event handlers

• Enforce Validation - makes it easier to enforce input validation because you can validate the input value before updating the state

• React Ecosystem Compatibility - align well with other React features, such as conditional rendering and controlled forms

• Integration with other components - when you need to pass the value of a controlled component to another component or synchronize multiple form elements, it's easier to manage and propagate state.