import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []); // Empty array: ทำงานครั้งเดียวหลัง Component mount

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

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

const MyContext = createContext('Default Value');

const Child = () => {
  const value = useContext(MyContext);
  return <p>Context Value: {value}</p>;
};

const App = () => {
  return (
    <MyContext.Provider value="Hello Hook!">
      <Child />
    </MyContext.Provider>
  );
};

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

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

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