Vivasoft-logo

7.3 āĻšā§āϕ⧇āϰ āĻŦā§āϝāĻŦāĻšāĻžāϰ

React āĻāϰ hooks āĻāϰ āϏāĻžāĻĨ⧇ āφāĻļāĻž āĻ•āϰāĻŋ āφāĻĒāύāĻžāϰāĻž āϏāĻŦāĻžāχ āĻ•āĻŽ āĻŦ⧇āĻļāĻŋ āĻĒāϰāĻŋāϚāĻŋāϤāĨ¤ useState, useEffect, useRef, useContext āϏāĻš āφāϰ⧋ āĻ…āύ⧇āĻ•āϗ⧁āϞ⧋āχ āφāϛ⧇āĨ¤Â  āĻāĻŦāĻžāϰ āϟāĻžāχāĻĒāĻ¸ā§āĻ•ā§āϰāĻŋāĻĒā§āĻŸā§‡āϰ āϏāĻžāĻĨ⧇ āϰāĻŋā§Ÿā§‡āĻ•ā§āϟ āĻšā§āĻ• āϗ⧁āĻ˛ā§‹Â  āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻžāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋ āϤāĻž āĻāĻ•āύāϜāϰ⧇ āĻĻ⧇āϖ⧇ āĻĢ⧇āϞāĻŋ āϚāϞ⧁āύ, 

useState

				
					 interface User {
   id: number;
   name: string;
   email: string
 }
 const [state, setState] = useState<User | null>(null);
				
			

āφāĻĒāύāĻžāϰāĻž āϝāĻĻāĻŋ āϟāĻžāχāĻĒ assertion āĻŦā§āϝāĻžāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āϚāĻžāύ āϤāĻžāĻšāϞ⧇ āĻāĻ­āĻžāĻŦ⧇ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŦ⧇āύ,

				
					const [state, setState] = useState<User>({} as User);
				
			

āĻāĻ–āĻžāύ⧇ āφāϏāϞ⧇ āϝāĻž āĻšāĻšā§āϛ⧇ āϤāĻž āĻšāϞ, āϟāĻžāχāĻĒāĻ¸ā§āĻ•ā§āϰāĻŋāĻĒā§āϟ āĻ•āĻŽā§āĻĒāĻžāχāϞāĻžāϰāϕ⧇ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻ•āϰ⧇ āĻŦāϞāĻž āĻšāĻšā§āϛ⧇ āϝ⧇ {} User  āϟāĻžāχāĻĒ⧇āϰāĨ¤ āĻāĻ­āĻžāĻŦ⧇ āύāĻž āĻ•āϰāĻžāϟāĻž āωāĻ¤ā§āϤāĻŽāĨ¤Â 

useCallback

				
					const handleClick = useCallback((param1: string, param2: number) => {
  console.log(param1, param2);
  //...
}, []);

				
			
useCallback āĻĢāĻžāĻ‚āĻļāύ⧇ āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰāϗ⧁āϞ⧋āϰ āϟāĻžāχāĻĒ āφāĻĒāύāĻžāϰāĻž āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻ•āĻ°ā§‡Â  āĻŦāϞ⧇ āĻĻāĻŋāϤ⧇ āĻĒāĻžāϰ⧇āύ āϟāĻžāχāĻĒ āϏ⧇āĻĢāϟāĻŋ āύāĻŋāĻļā§āϚāĻŋāϤ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝāĨ¤

āĻ āĻŋāĻ• āϤ⧇āĻŽāύāĻŋ āĻ­āĻžāĻŦ⧇ āύāĻŋāĻšā§‡ āĻŦāĻžāĻ•āĻŋ āĻ•āĻŋāϛ⧁ āϰāĻŋā§Ÿā§‡āĻ•ā§āϟ āĻšā§āĻ• āĻāϰ āωāĻĻāĻžāĻšāϰāĻŖ āĻĻā§‡ā§ŸāĻž āĻšāϞ:

useReducer

				
					 type Action = { type: 'increment'; payload: number } | { type: 'decrement';   payload: number };
 const initialCount = {
   count: 0,
 };
 const reducer = (state: initialCount, action: Action) => {
   switch (action.type) {
     case 'increment':
       //return something
     case 'decrement':
       //return something
     default:
       return state;
   }
 };

				
			

useReducer

				
					const ReactHooks = () => {
  const countRef = useRef<number>(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const divRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);
 const handleClick = () => {
   if (buttonRef.current) {
     buttonRef.current.disabled = true;
   }
 };
 return (
   <div>
     <div ref={divRef}>â€Ļ</div>
     <input type="text" ref={inputRef} />


     <button ref={buttonRef} onClick={handleClick}>
       Print Name
     </button>


     <p>Count: {countRef.current}</p>
     <button onClick={increment}>Increment</button>
   </div>
 );
};