4 Lesser Known React Tricks

1. Use the spread operator to pass props to child components:

You can use the spread operator to pass all the props from a parent component to a child component, which can save time and reduce code duplication. Here’s an example:

function ParentComponent() {
  const props = { name: 'John', age: 30 };
  return (
    <ChildComponent {...props} />
  );
}

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

2. Use arrow functions to avoid binding this:

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this.props);
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

3. Use short-circuit evaluation for conditional rendering:

You can use short-circuit evaluation to conditionally render elements based on a boolean expression. Here’s an example:

function MyComponent(props) {
  return (
    <div>
      {props.isLoggedIn && <p>Welcome back!</p>}
      {!props.isLoggedIn && <p>Please log in</p>}
    </div>
  );
}

4. Use destructuring to extract values from objects and arrays:

You can use destructuring to extract values from objects and arrays, which can make your code more concise and readable. Here’s an example:

function MyComponent(props) {
  const { name, age } = props;
  const [item1, item2] = myArray;
  
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Array item 1: {item1}</p>
      <p>Array item 2: {item2}</p>
    </div>
  );
}