React - Hook

import React, { useEffect, useRef, useContext, useState } from “react”;
import { useDispatch, useSelector } from “react-redux”;
import PropTypes from “prop-types”;
import styled from “styled-components”;
//img
//ic
//data
//action
//component
//styled
const Bound = styled.div``;//========================MAIN COMPONENT==========================
const ComponentName = props => { //======================Props===================================
//=====>Props Data
//=====>Props Function
const { propss } = props;
//======>Props Style
//======================State===================================
const [stateItem, setStateItem] = useState(“”);
//======================Redux===================================
//=====>Redux Action
const dispatch = useDispatch();
//=====>Redux Props
// const { itemReducer } = useSelector(state => ({
// item: state.itemReducer
// }));
//======================REF====================================
const nameRef = React.useRef(null);
//======================Variable================================
const variable = “”;
//======================Function=================================
const _myFunction = argument => {};
//======================Lifecycle Hook===========================
//=====================Render Main Component=====================
return <Bound>CONTENT COMPONENT</Bound>;
};
export default React.memo(ComponentName); //Avoid re-render === shouldComponentUpdate//================================Convert Lifecycle Hook======================================================
//[] === ComponentDidMount (run when init component)
// useEffect(() => {
// console.log(“I just mounted!“);
// }, []);
//return closure function === ComponentWillUnmount
// useEffect(() => {
// return () => console.log(“I am unmounting”);
// }, []);
//[props.count] === ComponentWillrecieveProp\ComponentDidUpdate (run when argument change)
// useEffect(() => {
// console.log(“count changed”, props.count);
// }, [props.count]);
//Empty === ComponentDidUpdate(allow run )
// useEffect(() => {
// console.log(“Just updated...“);
// });ComponentName.propTypes = {
propsItem: PropTypes.string.isRequired
};
ComponentName.defaultProps = {
propsItem: “argument”
};

Tìm hiểu thêm về Hook:
https://usehooks.com/