JS. React. Components in class style and HOOKS

Source

import React {Component, useState} from 'react'; // destruct here
...
class House extends Component // for example

//  or example from docs
class Welcome extends Component {
  render() {
    return <h1>Привет, {this.props.name}</h1>;
  }
}

import React, {Component, useState} from "react";
import cc from 'classcat';
import styles from './House.module.css';

export class House extends Component {

    constructor(props) {
        super(props);
        this.state = {
            myName: 'noName',
        }
    }

    setMyName(myName) {
        this.setState({myName});
    }

   
    render() {

        const {
            src,
            alt,
            title,
            price,
            location,
            isSold
        } = this.props;

        const {myName} = this.state;

        const styleTitle = cc({
            [styles.title]: true,
            [styles.isSold]: isSold
        });

        const handleImgClick = (e) => {
            e.preventDefault();
            this.setMyName('Stanley');
            this.setState({myName: 'Stanley'});
            alert(this.state.myName);
        }

        return (
            <div className={styles.house}>
                <img className={styles.image} src={src} alt={alt} onClick={this.handleImgClick}/>
                <p className={styleTitle}>{title}</p>
                <p className={styles.price}>{price}</p>
                <p className={styles.location}>{location}</p>
            </div>
        );

    }

    handleImgClick(e) {
     this.setMyName('Stanley');
     alert(this.state.myName);
    }
}

Pure Component with ShallowEqual

HOOKS

Details of react h in docs

useEffect

usePrevious

shouldComponentUpdate -> useMemo

для event useCallback