React Hooks — ano ito, mga pangunahing hooks at panuntunan sa paggamit

Ano ang React Hooks?

React Hooks — isang set ng mga built-in na function sa React na nagpapahintulot ng ‘pagkokonekta’ sa panloob na mekanismo ng framework nang hindi gumagawa ng mga klase. Bago ang React 16.8, ang mga functional component ay maaari lamang tumanggap ng props at magbalik ng JSX — anumang komplikadong lohika ay nangangailangan ng class component.

Ang problema ng mga class component — paghihiwalay ng kaugnay na lohika. Ang code na nauukol sa isang entity (halimbawa, WebSocket subscription) ay napipilitang hatiin sa pagitan ng componentDidMount, componentDidUpdate at componentWillUnmount. Ang mga hooks ay lumulutas nito: lahat ng lohika ay pinagsama-sama sa iisang useEffect.

Ang pangalawang problema — muling paggamit ng lohika. Para sa muling paggamit ng state logic sa pagitan ng class components, kailangang mag-apply ng HOC (higher-order components) o render props — parehong pattern ay lumilikha ng karagdagang nesting sa component tree. Ang mga custom hooks ay lumulutas sa problemang ito nang walang nesting.

useState — pamamahala ng state

useState — ang pinakapangunahing hook. Tumatanggap ito ng paunang halaga at nagbabalik ng tuple: ang kasalukuyang halaga at isang function para sa pag-update nito. Hindi tulad ng this.setState sa mga klase, ang useState ay hindi pinagsasama ang mga bagay — ang bagong state ay ganap na pinapalitan ang nauna para sa isang partikular na tawag sa useState.

import React, { useState } from 'react';

function Form() {
  const [text, setText] = useState('');
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit() {
    setSubmitting(true);
    await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify({ text })
    });
    setSubmitting(false);
  }

  return (
    <div>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <button onClick={handleSubmit}
        disabled={submitting}>
        {submitting ? 'Saving...' : 'Submit'}
      </button>
    </div>
  );
}

Functional na anyo ng setState

Ang setter ng useState ay maaaring tumanggap ng isang function na tumatanggap ng nakaraang halaga at nagbabalik ng bago. Functional na anyo ay sapilitan kapag ang bagong state ay kinakalkula mula sa nauna at posible ang mga batch na tawag sa setState — bawat tawag ay makakakuha ng napapanahong nakaraang halaga.

useEffect — side effects at lifecycle

useEffect — hook para sa pagsasagawa ng side effects sa functional components. Tumatanggap ito ng dalawang argumento: isang effect function at isang dependency array. Isinasagawa ng React ang effect pagkatapos ng bawat render, ngunit kapag tinukoy ang mga dependency — lamang kapag ang alinman sa mga ito ay nagbago.

Ang isang walang laman na dependency array [] ay nangangahulugan na ang effect ay isinasagawa nang isang beses pagkatapos ng unang render (kahalintulad ng componentDidMount). Ang pagbabalik ng function mula sa effect ay cleanup, na isinasagawa sa pag-unmount (kahalintulad ng componentWillUnmount) at bago ang muling pagsasagawa ng effect.

import React, { useState, useEffect } from 'react';

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = new WebSocket(`wss://chat/${roomId}`);

    socket.onmessage = (event) => {
      setMessages(prev => [...prev, JSON.parse(event.data)]);
    };

    // Cleanup - isara ang socket
    return () => socket.close();
  }, [roomId]);

  return <ul>
    {messages.map((msg, i) =>
      <li key={i}>{msg.text}</li>
    )}
  </ul>;
}

Ang mga dependency ng useEffect — ay ang tanging koneksyon sa pagitan ng effect at ng panlabas na mundo. Kung sa effect ay ginagamit ang isang variable mula sa props o state, ito ay dapat nasa dependency array. Ang pagbalewala sa panuntunang ito ay pinagmumulan ng mga bug na may luma na data (stale closure).

useContext — access sa context

useContext — hook para sa pagbabasa ng halaga ng context. Tumatanggap ito ng context object na ginawa ng React.createContext at nagbabalik ng kasalukuyang halaga. Kung nagbago ang context, ang component ay awtomatikong magre-render gamit ang bagong halaga.

Bago ang pagdating ng useContext, ang access sa context sa functional components ay nangangailangan ng pambalot sa Context.Consumer, na lumilikha ng nesting. useContext ay ganap na nag-aalis ng Consumer — sapat na ang tawagan ang hook sa kahit saang bahagi ng functional component.

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('maliwanag');

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return <button
    className={`btn btn-${theme}`}
  >
    {theme === 'dark' ? 'moon' : '☀️'}
  </button>;
}

Ang useContext ay hindi kapalit ng Redux o global state. Inirerekomenda ng React ang paggamit ng context para sa mga bihirang nagbabagong halaga — tema, wika, awtorisasyon. Para sa madalas na ina-update na data, ang bawat re-render ay muling kukuwentahin ang lahat ng consumer ng context, na maaaring magpababa ng performance.

useReducer — komplikadong lohika ng state

useReducer — alternatibo sa useState para sa mga state na may komplikadong update logic. Tumatanggap ito ng reducer function at paunang state, nagbabalik ng kasalukuyang state at dispatch function. Ang reducer ay tumatanggap ng kasalukuyang state at action, nagbabalik ng bagong state — isang purong function na walang side effects.

Ang useReducer ay lalong kapaki-pakinabang kapag maraming aksyon (set, reset, increment, addItem) ang namamahala sa iisang state. Sa halip na maraming useState na may iba’t ibang setter — isang reducer na may malinaw na action types. Ito ay ginagawang predictable at madaling i-test ang lohika.

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'setStep':
      return { ...state, step: action.step };
    case 'reset':
      return { count: 0, step: 1 };
    default:
      throw new Error('Unknown action: ' + action.type);
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, {
    count: 0,
    step: 1
  });

  return (
    <>
      <p>Count: {state.count}</p>
      <button
        onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button
        onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </>
  );
}

useRef, useMemo, useCallback — optimisasyon

useRef ay lumilikha ng isang nababagong bagay na nananatili sa pagitan ng mga render. Ang pagbabago ng current ay hindi nagdudulot ng re-render. Pangunahing gamit — access sa DOM elements at pag-iimbak ng mga nababagong halaga (timer, nakaraang halaga, instance ng mga library).

useMemo ay nagme-memoize ng resulta ng isang function. Kinukuwenta nito muli ang halaga lamang kapag nagbago ang isa sa mga dependency. Gamitin para sa mahal na kalkulasyon — pag-filter ng malalaking array, pag-sort, pag-format ng data. useCallback — isang espesyal na kaso ng useMemo para sa pagme-memoize ng mga function.

import React, { useRef, useMemo, useCallback } from 'react';

function SearchPage({ items, query, onItemSelect }) {
  const inputRef = useRef(null);

  // Autofocus sa mount
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  // i-memoize ang na-filter na resulta
  const filtered = useMemo(() => {
    return items.filter(item =>
      item.name.toLowerCase()
        .includes(query.toLowerCase())
    );
  }, [items, query]);

  // i-memoize ang callback
  const handleSelect = useCallback((id) => {
    onItemSelect(id);
  }, [onItemSelect]);

  return (
    <div>
      <input ref={inputRef}
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <ul>
        {filtered.map(item =>
          <li key={item.id}>
            <button
              onClick={() => handleSelect(item.id)}>
              {item.name}
            </button>
          </li>
        )}
      </ul>
    </div>
  );
}

Mahalagang panuntunan: useRef, useMemo at useCallback — mga kasangkapan sa optimisasyon, hindi sapilitang konstruksyon. Huwag balutin ang lahat sa useMemo — sukatin muna ang performance. Ang napaagang optimisasyon ay nagpapakumplikado ng code. Ang React ay nagre-render ng mga component nang mabilis; ang useMemo ay kailangan lamang kapag ang mga kalkulasyon ay talagang mahal (O(n²) at mas mataas).

Mga panuntunan ng hooks at karaniwang pagkakamali

Ipinakilala ng React ang dalawang mahigpit na panuntunan para sa hooks. Una: tawagan ang hooks lamang sa pinakamataas na antas — hindi sa loob ng mga kondisyon, loop, o nested function. Pangalawa: tawagan ang hooks lamang mula sa React functional components o custom hooks. Ang ESLint plugin na eslint-plugin-react-hooks ay awtomatikong nagsusuri ng parehong panuntunan.

Ang pinakakaraniwang pagkakamali — paglabag sa pagkakasunod-sunod ng pagtawag ng hooks. Ang React ay umaasa sa pagkakasunod-sunod ng pagtawag ng hooks sa pagitan ng mga render. Kung ang isang hook ay nasa loob ng kondisyon at hindi natawag sa isa sa mga render, lahat ng kasunod na hook ay lumilipat, na nagdudulot ng mga bug.

Ang pangalawang karaniwang pagkakamali — stale closure sa useEffect. Kung sa effect ay ginagamit ang isang variable na hindi tinukoy sa mga dependency, ang effect ay ‘nakakakuha’ ng halaga nito sa sandali ng paggawa ng closure. Solusyon — laging isama ang lahat ng ginamit na variable sa dependency array. Kung napakaraming dependency, hatiin ang effect sa ilang bahagi.