Basic Hooks:

useState: to change any state mean data

cmd: const [<name>, <fun>]=useState(<default state>);
useEffect: it is used to implment different life-cycle events
(didmount(),didupdate(),willUnmount())
cmd: useEffect (<function>,<dependencies list>)
cmd: useEffect( ()=>{}, [<stateName>])
above to were for didmount & didupdate
cmd: useEffect( ()=>{ return ()=>{} },) return function will run on
tear down of component

useContext: share data without props

Additional Hooks:
useReducer:
useCallBack: to memomize function to optimize performance.
const <fun-name> = useCallback(()=>{<fun-body>},[dependancy])
useMemo: top optimize computations. The useMemo Hook only runs when one of
its dependencies update.
NOTE: use only as needed for expensive calculations
cmd: const expensiveCount = useMemo(()=>{return count**2;},[count])

useRef:
--Does Not Cause Re-renders,
If we tried to count how many times our application renders using the
useState Hook,
we would be caught in an infinite loop since this Hook itself causes a
re-render.
To avoid this, we can use the useRef Hook.

--Accessing DOM Elements:

import { useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
const inputElement = useRef();

const focusInput = () => {

inputElement.current.focus();
};

return (
<>
<input type="text" ref={inputElement} />
<button onClick={focusInput}>Focus
Input</button>
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

useImperativeHandle:
cmd: useImperativeHandle(ref, createHandle, [deps])
useLayoutEffect:
useDebugValue:

Resources:
https://stackoverflow.com/questions/57005663/when-to-use-useimperativehandle-
uselayouteffect-and-usedebugvalue