Components

Components

Components are the fundamental building blocks used to create user interfaces for web applications. They allow you to break down complex user interfaces into smaller, manageable parts, maintainable, and easy to understand.

Key aspects of React components,

1. Reusability: Components can be reused throughout your application. This reusability promotes code efficiency and consistency because you can use the same component to render similar UI elements in different parts of your application.

2. Encapsulation: Components encapsulate their own logic and state, making it easier to reason about and test individual parts of your application. This encapsulation also helps prevent unintended interactions between different parts of the application.

3. Composition: React components can be composed together to build complex user interfaces. You can nest components within other components to create a hierarchy of elements, with each component responsible for a specific part of the UI.

4. Modularity: Components encourage a modular code structure. Each component can be developed and tested independently, making it easier to maintain and extend your application as it grows.

5. Props: Components can receive data and configuration through props (short for properties). Props are passed from parent components to child components and allow you to customize and configure the behavior and appearance of a component.

6. Event Handling: Components can respond to user interactions by defining event handlers. These handlers allow you to capture and process user input, such as clicks, input changes, and more.

7. State Management: React components can manage their own state using the useState hook or by extending the React.Component class for class-based components. State allows components to store and manage data that can change over time, making it possible to create dynamic and interactive UIs.

8. Render: Every React component must implement a render method (for class-based components) or return JSX (for functional components). The render method defines what the component should render on the screen.

---

Types of component

React offers two primary ways to define components,

Functional Components	Class Components
These are defined as JavaScript functions..	These are defined as JavaScript classes that extend `React.Component`.
They are simpler and easier to understand.	Class components have been used in older versions of React and are still relevant in some cases, particularly when working with lifecycle methods or for integrating with certain libraries.
They do not have their own internal state. Hence they "dumb components". With the introduction of React hooks (such as `useState` and `useEffect`), functional components can manage local state and perform side effects, blurring the line between stateless and stateful components.	They have their own internal state, which can be modified using setState to trigger re-renders and update the UI.
	They have access to lifecycle methods (e.g., `componentDidMount`, `componentDidUpdate`) for managing side effects and component behavior.

info

In modern React development, functional components are often preferred over class components for their simplicity and because they align better with the concept of hooks, which enable functional components to handle state and side effects effectively.

---

Keeping Components Pure

• A component must be pure, meaning:
  • It minds its own business. It should not change any objects or variables that existed before rendering.
  • Same inputs, same output. Given the same inputs, a component should always return the same JSX.
• Rendering can happen at any time, so components should not depend on each others’ rendering sequence.
• You should not mutate any of the inputs that your components use for rendering. That includes props, state, and context. To update the screen, “set” state instead of mutating preexisting objects. “local mutation” is fine, that is mutating variables created inside the component.
• Strive to express your component’s logic in the JSX you return. When you need to “change things (i.e. side effects)”, you’ll usually want to do it in an event handler (because they don’t run during rendering! So event handlers don’t need to be pure.). As a last resort, you can useEffect.