ਉੱਨਤ React Developers ਨੂੰ Hooks ਬਾਰੇ ਕਿਵੇਂ ਸੋਚਣਾ ਚਾਹੀਦਾ ਹੈ
ਜ਼ਿਆਦਾਤਰ developers hooks ਨੂੰ ਇਹ ਸਮਝੇ ਬਿਨਾਂ ਸਿੱਖਦੇ ਹਨ ਕਿ React ਕਿਵੇਂ render ਕਰਦਾ ਹੈ। ਇਸ ਨਾਲ ਉਲਝਣ ਪੈਦਾ ਹੁੰਦੀ ਹੈ। Hooks ਵਿੱਚ ਮਾਹਰ ਹੋਣ ਲਈ, ਤੁਹਾਨੂੰ ਪੰਜ ਮੁੱਖ ਜ਼ਿੰਮੇਵਾਰੀਆਂ ਨੂੰ ਸਮਝਣਾ ਚਾਹੀਦਾ ਹੈ:
• ਡੇਟਾ ਨੂੰ ਯਾਦ ਰੱਖਣਾ • side effects ਨੂੰ ਚਲਾਉਣਾ • ਡੇਟਾ ਸਾਂਝਾ ਕਰਨਾ • rendering ਨੂੰ optimize ਕਰਨਾ • scheduling ਨੂੰ ਕੰਟਰੋਲ ਕਰਨਾ
State ਵਿੱਚ ਬਦਲਾਅ re-renders ਨੂੰ ਤ੍ਰਿਗਰ ਕਰਦੇ ਹਨ। ਹਰ re-render ਵੇਰੀਏਬਲ, ਆਬਜੈਕਟ ਅਤੇ ਫੰਕਸ਼ਨ ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਸਧਾਰਨ ਤੱਥ ਦੱਸਦਾ ਹੈ ਕਿ useMemo ਅਤੇ useCallback ਕਿਉਂ ਮੌਜੂਦ ਹਨ।
Hooks ਨੂੰ ਸਮਝਣਾ
State ਅਤੇ Ordering React, state ਨੂੰ component Fiber ਨਾਲ ਜੁੜੀ ਇੱਕ linked list ਵਿੱਚ ਸਟੋਰ ਕਰਦਾ ਹੈ। ਇਹੀ ਕਾਰਨ ਹੈ ਕਿ ਤੁਸੀਂ conditions ਜਾਂ loops ਦੇ ਅੰਦਰ hooks ਨੂੰ ਕਾਲ ਨਹੀਂ ਕਰ ਸਕਦੇ। React ਸਹੀ state ਲੱਭਣ ਲਈ calls ਦੇ ਆਰਡਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ।
Batching ਦੀ ਅਸਲੀਅਤ ਜਦੋਂ ਤੁਸੀਂ setState ਨੂੰ ਕਾਲ ਕਰਦੇ ਹੋ, ਤਾਂ React ਇੱਕ update ਨੂੰ schedule ਕਰਦਾ ਹੈ। ਇਹ ਤੁਰੰਤ ਮੁੱਲ (value) ਨਹੀਂ ਬਦਲਦਾ। ਇਹੀ ਕਾਰਨ ਹੈ ਕਿ state ਨੂੰ ਸੈੱਟ ਕਰਨ ਤੋਂ ਤੁਰੰਤ ਬਾਅਦ log ਕਰਨ 'ਤੇ ਪੁਰਾਣੀ value ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ। stale data ਤੋਂ ਬਚਣ ਲਈ ਹਮੇਸ਼ਾ functional update pattern ਦੀ ਵਰਤੋਂ ਕਰੋ:
- ਮਾੜਾ: setCount(count + 1)
- ਚੰਗਾ: setCount(prev => prev + 1)
useEffect ਦਾ Mental Model useEffect ਨੂੰ lifecycle method ਵਾਂਗ ਸਮਝਣਾ ਬੰਦ ਕਰੋ। ਇਸਦੀ ਵਰਤੋਂ ਆਪਣੇ component ਨੂੰ APIs ਜਾਂ WebSockets ਵਰਗੇ ਬਾਹਰੀ ਸਿਸਟਮਾਂ ਨਾਲ synchronise ਕਰਨ ਲਈ ਕਰੋ।
ਮਹੱਤਵਪੂਰਨ: useEffect ਚੱਲਣ ਤੋਂ ਪਹਿਲਾਂ React ਸਕ੍ਰੀਨ ਨੂੰ paint ਕਰਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ effect UI ਨੂੰ ਰੋਕੇ ਨਾ। ਜੇਕਰ ਤੁਹਾਨੂੰ user ਦੁਆਰਾ ਦੇਖਣ ਤੋਂ ਪਹਿਲਾਂ DOM ਨੂੰ ਮਾਪਣ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ useLayoutEffect ਦੀ ਵਰਤੋਂ ਕਰੋ।
useRef ਦੀ ਅਸਲੀਅਤ ਇੱਕ ref ਸਿਰਫ਼ DOM elements ਲਈ ਨਹੀਂ ਹੈ। ਇਹ ਇੱਕ persistent mutable container ਹੈ। React renders ਦੇ ਵਿਚਕਾਰ ਇੱਕੋ object reference ਰੱਖਦਾ ਹੈ। ref.current ਨੂੰ ਬਦਲਣ ਨਾਲ re-render ਤ੍ਰਿਗਰ ਨਹੀਂ ਹੁੰਦਾ। ਇਸਦੀ ਵਰਤੋਂ timers, sockets, ਜਾਂ ਪਿਛਲੀਆਂ values ਲਈ ਕਰੋ।
Memoization ਦਾ ਜਾਲ useMemo ਰਫ਼ਤਾਰ ਲਈ ਕੋਈ ਜਾਦੂਈ ਬਟਨ ਨਹੀਂ ਹੈ। ਇਸਦੀ ਇੱਕ overhead cost ਹੁੰਦੀ ਹੈ। React ਨੂੰ cache ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ ਅਤੇ dependencies ਦੀ ਤੁਲਨਾ ਕਰਨੀ ਪੈਂਦੀ ਹੈ।
useMemo ਦੀ ਵਰਤੋਂ ਉਦੋਂ ਹੀ ਕਰੋ ਜੇਕਰ calculation ਦੀ ਲਾਗਤ memoization ਦੀ ਲਾਗਤ ਨਾਲੋਂ ਜ਼ਿਆਦਾ ਹੋਵੇ। ਜੇਕਰ ਤੁਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਸਧਾਰਨ ਗਣਿਤ ਲਈ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੀ ਐਪ ਨੂੰ ਹੋਰ ਹੌਲੀ ਕਰ ਦਿੰਦੇ ਹੋ।
Context, State Management ਨਹੀਂ ਹੈ Context, dependency injection ਲਈ ਹੈ। ਇਹ ਤੁਹਾਨੂੰ prop drilling ਤੋਂ ਬਚਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਜਦੋਂ Context ਦੀ value ਬਦਲਦੀ ਹੈ, ਤਾਂ ਹਰ consumer re-render ਹੁੰਦਾ ਹੈ। ਆਪਣੀ ਸਾਰੀ global state ਨੂੰ ਇੱਕ ਹੀ provider ਵਿੱਚ ਨਾ ਰੱਖੋ। ਆਪਣੇ contexts ਨੂੰ ਮਕਸਦ ਅਨੁਸਾਰ ਵੱਖ ਕਰੋ।
ਐਡਵਾਂਸਡ ਪੈਟਰਨ • useReducer: ਕਈ useState ਕਾਲਾਂ ਦੀ ਬਜਾਏ ਗੁੰਝਲਦਾਰ ਸਟੇਟ ਮਸ਼ੀਨਾਂ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ। • startTransition: ਭਾਰੀ ਅਪਡੇਟਾਂ ਦੌਰਾਨ ਆਪਣੇ UI ਨੂੰ ਰਿਸਪੌਂਸਿਵ ਰੱਖਣ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ। • useDeferredValue: ਜਦੋਂ ਯੂਜ਼ਰ ਟਾਈਪ ਕਰ ਰਿਹਾ ਹੋਵੇ, ਤਾਂ ਮਹਿੰਗੇ UI ਅਪਡੇਟਾਂ ਨੂੰ ਦੇਰੀ ਨਾਲ ਕਰਨ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ।
ਲੌਜਿਕ ਨੂੰ ਕਸਟਮ ਹੁੱਕਸ (custom hooks) ਵਿੱਚ ਬਦਲ ਕੇ ਸਾਫ਼ ਕੋਡ ਲਿਖੋ। 1200-ਲਾਈਨਾਂ ਵਾਲਾ ਇੱਕ ਕੰਪੋਨੈਂਟ ਬਣਾਈ ਰੱਖਣਾ ਮੁਸ਼ਕਲ ਹੁੰਦਾ ਹੈ। ਪੰਜ ਛੋਟੇ, ਲੌਜਿਕ ਵਾਲੇ ਹੁੱਕਸ ਨੂੰ ਸਕੇਲ ਕਰਨਾ ਆਸਾਨ ਹੁੰਦਾ ਹੈ।
ਸਰੋਤ: https://dev.to/jagadeesh_008/how-advanced-react-developers-should-think-about-hooks-102l