• DOM
• UseState

DOM

Diagram of the React Components interacting with the DOM. How individual react components interact with the DOM.

UseState

Adding state to a stateless function

Comparing Hooks and Classes for setting state.

Animation showing how state in Hooks and Classes are related

Animation showing a full comparison between a Hook and a Class

// Class Example
class Example extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }
    render() {
      return (
          <button onClick={() => this.setState({ count: this.state.count + 1 })}>
            Click me
          </button>
      );
    }
  }

// Hook Example
function Example() {
  const [count, setCount] = useState(0);

  return (
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
  );
}