izabellewilding

export default class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "John"
    };
    this.changeName = this.changeName.bind(this);
  }

  changeName() {

izabellewilding

componentDidMount() {
    fetch("https://example.api.com")
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

izabellewilding

const [data, setData] = useState()

useEffect(() =>
  fetch('https://example.api.com')
    .then(response => response.json())
    .then(data => this.setState({data});
), []);

izabellewilding

componentDidUpdate(prevProps) {
  if (this.props.userName !== prevProps.userName) {
    this.fetchData(this.props.userName);
  }
}

izabellewilding

useEffect(() => {
    const handleScroll = () => {
        console.log("page was scrolled";
    };
    window.addEventListener("scroll", handleScroll);
    return () => {
        window.removeEventListener("scroll", handleScroll);
    }
}, []);

izabellewilding

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { error: null }
  }

  componentDidCatch(error) {
    this.setState({
      error,
    })

izabellewilding

<ErrorBoundary>
  <ChildComponent>
</ErrorBoundary>

izabellewilding

import "./styles.css";
import { useCallback, useEffect, useState } from "react";

const SubComponent = ({ handleClick, isRed }) => {
  useEffect(() => {
    const interval = setInterval(() => {
      handleClick(!isRed);
    }, 1000);

    return () => clearInterval(interval);