React Components

Table of Contents

  1. What Are Components In React?
  2. When To Use React Components?
  3. Why Use React Components?
  4. Class Components VS Functional Components
  5. Managing State With Functional Components: useState Hooks
  6. Final Remark
  7. Sources

What Are Components In React?

React Components refer to independent and reusable chunks of code that encapsulate a specific functionality or UI that can be imported and used in a larger application. Essentially, React Components serve a similar purpose as JavaScript functions but for front-end UI contexts as they work in isolation, can be given an input, and return an HTML graphical component for the user to conveniently use as a cog in their larger web application. In total, this allows you to split the UI of your application into modular, reusable pieces, and focus on each piece in isolation to create a powerful application.

When To Use React Components?

It is a best practice for React developers to define and use a React component whenever defining UI code that may be repeated again in their project. Looking back to our analogy with javaScript functions, this is similar to encapsulating a for loop and some calculations into a function so that we don’t have to repeat this same piece of code several times in our project, following the SOLID design principles. Understanding this purpose, here are a couple of examples of UI parts that could warrant the use of a React Component on a typical web application:

Why Use React Components?

Although they are not necessarily required for basic functionality, it is a best practice for software developers to use React components whenever a piece of code in the UI serves an independent purpose and can be abstracted away. The benefits of using React Components include:

Where To Include Components?

Typically in a clean environment, components will be stored in their own folder, and even placed into subfolders for complete organisation in the front end directory of the project. Then, they can be imported from these subsections easily as they have proper organisation. Below is an example of this component folder structure:

Class Components VS Functional Components

React components come in two flavours, class components and functional components, which essentially differ by their ability to manage internal state.

Class Components

Class Component Code Example:

class Counter extends Component { constructor(props) { super(props); this.state = { count: 0, // Initializing the state with a count of 0 }; }

incrementCount = () => { this.setState({ count: this.state.count + 1 }); // Updating the count in the state };

render() { return ( <div> <p>Count: {this.state.count}</p> {/* Displaying the current count /} <button onClick={this.incrementCount}>Increment</button> {/ Button to increment the count */} </div> ); } }


### Functional Components
- **Stateless Components:** Do not have the ability to hold and manage local state.
- Simpler and more lightweight compared to class components.
- Absence of the `this` keyword.
- Ideal for purely presentational aspects of a web application.
- Can take `props` as a parameter and use them in the HTML response.
- Tip: Use Func components as much as possible for graphical components

**Functional Component Code Example:**
- In this example we simply return an html response with the name that was provided in props
- Note that we “export default <functionalCompName>” at the end to import it from another file 

```jsx
import React from 'react';

const FunctionalComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is a functional component.</p>
    </div>
  );
};

export default FunctionalComponent;

Managing State With Functional Components: useState Hooks

Although Functional Components do not inherently allow for local state to be managed, React Hooks makes this possible. Here is an example of a useState hook:

Example of useState Hook:

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Final Remark

With the introduction of useState hooks, functional components can now manage their internal state, side effects, and other advanced features, making them more powerful and versatile for smaller components. However, for projects involving advanced state management and more complex components, it’s recommended to use class components.

Common Mistakes

When working with React components, developers often encounter these mistakes:

  1. Not Using Keys Properly in Lists:
    • When rendering a list of components dynamically, it’s crucial to provide a unique key prop to each item. Failing to do so can lead to unexpected behavior and performance issues.
    // Incorrect usage without a key
{items.map(item => <MyComponent>{item}</MyComponent>)}

// Correct usage with a key
{items.map(item => <MyComponent key={item.id}>{item}</MyComponent>)}
  2. Incorrect Handling of State Updates

When working with state in React, it’s crucial to update state correctly to avoid unexpected behavior. Here’s an example of incorrect and correct state updates:

// Incorrect state update
this.setState({ count: this.state.count + 1 });

// Correct state update using the functional form
this.setState(prevState => ({ count: prevState.count + 1 }));
  1. Not Destructuring Props or State ```jsx // Incorrect usage without destructuring const MyComponent = (props) => { return <div>{props.name}</div>; };

// Correct usage with destructuring const MyComponent = ({ name }) => { return <div>{name}</div>; };


4. **Not Destructuring Props or State**
```jsx
Overusing Class Components:
// Avoid unnecessary class components when state is not needed
class UnnecessaryClassComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

// Use a functional component instead
const FunctionalComponent = () => {
  return <div>Hello, World!</div>;
};

Sources