Hooks: concepts and advantages - useState, useEffect, useContext; useRef, useReducer, useCallback, useMemo; building custom hook, advantages and use

📖 Theory

Function component યાદ કઈ રીતે રાખે છે

React નું function component તો ફક્ત એક function છે: એ ચાલે છે, JSX પાછું આપે છે, અને બધું ભૂલી જાય છે. તો counter clicks વચ્ચે પોતાની ગણતરી કઈ રીતે યાદ રાખે છે? Page load થાય ત્યારે FestConnect પોતાના events એક વાર કઈ રીતે લાવે છે?

જવાબ છે hooks: એટલે કે એવાં ખાસ functions જે function components ને યાદશક્તિ અને જીવનચક્રની એ શક્તિઓ આપે છે જે એક જમાનામાં ફક્ત class components પાસે જ હતી. એમાંનું એક, useState, તમે form ની કિંમતો રાખવા વાપરી ચૂક્યા છો. આ પાઠ hooks નો પરિવાર, એમના પરના નિયમો, અને તમારું પોતાનું logic custom hooks માં કઈ રીતે બાંધવું તે આવરી લે છે. Hooks એ આધુનિક React નું હૃદય છે, અને એ FestConnect નું front-end પૂરું કરે છે.

📖 Theory

useState અને useEffect: રોજ વપરાતાં બે

useState component માં STATE ઉમેરે છે:

const [count, setCount] = useState(0);

count એ ચાલુ કિંમત છે, setCount એને બદલે છે, અને setCount બોલાવવાથી નવી કિંમત સાથે ફરી render થાય છે. State એ component નો પોતાનો બદલી શકાય એવો data છે (ફક્ત વાંચી શકાય એવાં props થી ઊલટું).

useEffect આડઅસરો ચલાવે છે (એટલે કે render ની બહારની વસ્તુઓ: data લાવવો, timers, subscriptions) અને એ component render થયા પછી ચાલે છે. એનો બીજો argument, એટલે કે dependency array, નક્કી કરે છે કે એ ક્યારે ચાલે:

• [] (ખાલી): એક જ વાર, mount વખતે ચાલે: page load થાય ત્યારે FestConnect ના events લાવવા માટે ઉત્તમ
• [x]: જ્યારે જ્યારે x બદલાય ત્યારે ચાલે
• ન આપો તો: દરેક render પછી ચાલે (જે ભાગ્યે જ જોઈતું હોય છે)

મોટા ભાગનાં ખરાં components માટે આ બે પૂરતાં છે: યાદ રાખવા state, અને બહારની દુનિયા સુધી પહોંચવા effects.

⌨️ Practical

useState (counter) અને useEffect (mount પર fetch)

function EventPage() {
  const [count, setCount] = React.useState(0);      // state
  const [events, setEvents] = React.useState([]);

  // useEffect with [] runs ONCE, after the first render:
  React.useEffect(() => {
    fetch("/api/events")            // hits the MongoDB-backed API
      .then(r => r.json())
      .then(data => setEvents(data));  // updates state -> re-render
  }, []);                            // [] = run once on mount

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
      <p>{events.length} events loaded</p>
    </div>
  );
}

This example runs in Gri-Learn on the web, where you can edit it and see the output.

📊 At a glance

Hooks નો પરિવાર

📖 Theory

Hooks ના નિયમો, અને custom hooks

Hooks ના 2 તોડી ન શકાય એવા નિયમો છે:

• Hooks ને ફક્ત component ના સૌથી ઉપરના સ્તરે બોલાવો, loops, શરતો કે અંદરનાં functions ની અંદર કદી નહીં (React આધાર રાખે છે કે દરેક render વખતે hooks એ જ ક્રમમાં બોલાવાય)
• Hooks ને ફક્ત React નાં function components માંથી (કે બીજાં hooks માંથી) બોલાવો

Custom hooks એ તમારું પોતાનું ફરી વાપરી શકાય એવું logic છે: એટલે કે use થી શરૂ થતા નામ વાળું function જે બીજાં hooks બોલાવે છે. દાખલા તરીકે useEvents() નામનું custom hook events લાવવાનું state અને effect એકસાથે બાંધી શકે, જેથી કોઈ પણ component const events = useEvents(); લખીને data મેળવી શકે. Custom hooks એ જ રીત છે જેનાથી તમે state વાળું logic ફરી ફરી લખ્યા વગર components વચ્ચે વહેંચો છો: જૂના class વાળા રસ્તા સામે hooks નો આ મુખ્ય ફાયદો છે.

🧩 Quiz

તમે ઇચ્છો છો કે page પહેલી વાર load થાય ત્યારે FestConnect પોતાના events બરાબર એક જ વાર fetch કરે. useEffect માં કયો dependency array વાપરશો?

1. કોઈ બીજું argument નહીં (દરેક render પછી ચાલે છે)
2. ખાલી array []: effect એક જ વાર, mount પર ચાલે છે
3. [events]: events બદલાય ત્યારે દર વખતે ચાલે છે
4. useEffect ક્યારે ચાલે એ નિયંત્રિત કરી શકાતું નથી

💭 Think first

fetch નો અનંત ફેરો

એક વિદ્યાર્થી events fetch કરવા useEffect લખે છે પણ dependency array સાવ લખવાનું જ ભૂલી જાય છે. Network tab માં એ જ request વારંવાર ફૂટતી દેખાય છે. કારણ શોધો. પછી tap કરો.

⚠️ Watch out

Hooks ની જાળ

Dependency array ખૂટતો કે ખોટો: array જ ન હોય એટલે દરેક render (fetch સાથે અનંત ફેરો); [] એટલે એક વાર; [x] એટલે x બદલાય ત્યારે.

Conditions કે loops ની અંદર hooks: આ hooks ના નિયમ તોડે છે; એમને ફક્ત ઉપરના સ્તરે જ call કરો.

State ને સીધું બદલવું: setter વાપરો (setCount), ક્યારેય count = ... નહીં; સીધો ફેરફાર re-render કરાવતો નથી.

વાસી closures: effect જૂની state કિંમત પકડી રાખે; યોગ્ય dependencies સામેલ કરો.

Custom hook નું નામ 'use' થી શરૂ ન થવું: નિયમો લાગુ પડે એ માટે નામ use થી શરૂ થવું જ જોઈએ.

📖 Theory

Unit 2 પૂરું: React front-end તૈયાર

FestConnect પાસે હવે આધુનિક React front-end છે: components અને props, events, lists, conditional rendering, controlled forms, અને state, effects તથા ફરી વાપરી શકાય એવા logic માટે hooks, અને એ બધું Unit 1 ના MongoDB back-end પર બેઠેલું છે. એટલે કે એક આખો આધુનિક stack તૈયાર. Unit 3 બીજું મોટું front-end framework શીખવે છે, એટલે કે Angular, જેથી તમે ઉદ્યોગના બે અગ્રણીઓ સરખાવી શકો. જુદી ફિલસૂફી, પણ ધ્યેય એક જ: React components ની library હતી; Angular આખું framework છે, અને એ હવે પછી.

✅ Summary

Key takeaways

• Hooks એવાં functions છે (નામ 'use' થી શરૂ થાય) જે function components ને state અને lifecycle ની શક્તિ આપે છે.
• useState state ઉમેરે છે: [value, setValue] = useState(initial); setter re-render કરાવે છે.
• useEffect render પછી આડઅસરો ચલાવે છે; dependency array સમય નક્કી કરે છે: [] એટલે એક વાર, [x] એટલે x બદલાય ત્યારે, અને array છોડી દો એટલે દરેક render.
• કુટુંબ: useContext (વહેંચાયેલો context), useRef (re-render વગર સાચવવું કે DOM ref), useReducer (જટિલ state), useCallback અને useMemo (memoize કરવા).
• Hooks ના નિયમ: ફક્ત ઉપરના સ્તરે અને ફક્ત React ના functions માંથી જ call કરો.
• Custom hooks ('use' થી શરૂ થતાં એવાં functions જે hooks call કરે) components વચ્ચે state વાળું logic ફરી વાપરવા દે છે.
• યાદ રાખવાની કડી: useState યાદ રાખે છે, useEffect બહાર પહોંચે છે, અને [] એક જ વાર ચાલે છે.