prdxs

function StatelessButton({ className, size, color, children }) {
  const style = {
    backgroundColor: color,
    padding: sizeToPadding[size],
    fontSize: sizeToFontSize[size],
  };
  return (
    <button className={clsx('StatelessButton', className)} style={style}>
      {children}
    </button>

prdxs

class ClicksButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
    };
  }
  handleClick = () => {
    this.setState(({ clicks }) => ({
      clicks: clicks + 1,

prdxs

function ClicksButton({ className, style }) {
  const [clicks, setClicks] = useState(0);
  const handleClick = useCallback(() => setClicks((clicks) => clicks + 1), []);
  return (
    <button
      className={clsx('ClicksButton', className)}
      style={style}
      onClick={handleClick}
    >
      Clicks {clicks}

prdxs

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date().toLocaleTimeString(),
    };
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({ time: new Date().toLocaleTimeString() });

prdxs

function Clock({ className, style }) {
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  useEffect(() => {
    setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
  }, []);
  return (
    <span
      className={clsx('Clock', className)}

prdxs

function StoppableClock({ className, style }) {
  const [time, setTime] = useState(new Date().toLocaleTimeString());
  const [isRunning, setIsRunning] = useState(true);
  const toggle = useCallback(() => {
    setIsRunning(isRunning => !isRunning);
  }, []);
  useEffect(() => {
    if (isRunning) {
      const intervalId = setInterval(() => {
        setTime(new Date().toLocaleTimeString());

prdxs

class StoppableClock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date().toLocaleTimeString(),
      isRunning: true,
    };
  }
  componentDidMount() {
    this.intervalId = setInterval(() => {

prdxs

class StoppableClock extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date().toLocaleTimeString(),
      isRunning: true,
    };
  }
  componentDidMount() {
    this.intervalId = setInterval(() => {

prdxs

class PerfClicksButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    const sameClassName = nextProps.className === this.props.className;
    const sameStyle = nextProps.style === this.props.style;

prdxs

class PerfClicksButton extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
    };
  }
  handleClick = () => {
    this.setState(({ clicks }) => ({
      clicks: clicks + 1,