Reactでコンテキスト値を動的に生成するカスタムフックの作成方法

import { useState } from "react";

function useCustomHook() {
  const [state, setState] = useState(initialValue);

  const updateState = (newValue) => {
    setState(newValue);
  };

  return { state, updateState };
}

export default useCustomHook;

import { useState, useEffect } from "react";

function useDynamicValue(initialValue) {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    console.log("Value updated:", value);
  }, [value]);

  return { value, setValue };
}

import { useState } from "react";

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

import React from "react";
import useCounter from "./useCounter";

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default CounterComponent;

import React, { createContext, useContext, useState } from "react";

// Contextを作成
const MyContext = createContext();

// Context Providerを作成
export const MyProvider = ({ children }) => {
  const [value, setValue] = useState("Initial Value");

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

export const useMyContext = () => {
  const context = useContext(MyContext);

  if (!context) {
    throw new Error("useMyContext must be used within a MyProvider");
  }

  return context;
};

import React from "react";
import { MyProvider, useMyContext } from "./MyContext";

const MyComponent = () => {
  const { value, setValue } = useMyContext();

  return (
    <div>
      <p>Current Value: {value}</p>
      <button onClick={() => setValue("Updated Value")}>Update Value</button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;

import React, { createContext, useContext, useState } from "react";

// カウンタ用Contextの作成
const CounterContext = createContext();

// Context Provider
export const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);
  const reset = () => setCount(0);

  return (
    <CounterContext.Provider value={{ count, increment, decrement, reset }}>
      {children}
    </CounterContext.Provider>
  );
};

export const useCounter = () => {
  const context = useContext(CounterContext);

  if (!context) {
    throw new Error("useCounter must be used within a CounterProvider");
  }

  return context;
};

import React from "react";
import { useCounter } from "./CounterContext";

const CounterComponent = () => {
  const { count, increment, decrement, reset } = useCounter();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

export default CounterComponent;

import React from "react";
import ReactDOM from "react-dom";
import { CounterProvider } from "./CounterContext";
import CounterComponent from "./CounterComponent";

const App = () => (
  <CounterProvider>
    <CounterComponent />
  </CounterProvider>
);

ReactDOM.render(<App />, document.getElementById("root"));

import React, { createContext, useContext, useReducer } from "react";

// 初期状態
const initialState = {
  items: [],
  total: 0,
};

// Reducer関数
const cartReducer = (state, action) => {
  switch (action.type) {
    case "ADD_ITEM":
      return {
        ...state,
        items: [...state.items, action.payload],
        total: state.total + action.payload.price,
      };
    case "REMOVE_ITEM":
      return {
        ...state,
        items: state.items.filter((item) => item.id !== action.payload.id),
        total: state.total - action.payload.price,
      };
    default:
      return state;
  }
};

const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCart = () => {
  const context = useContext(CartContext);

  if (!context) {
    throw new Error("useCart must be used within a CartProvider");
  }

  return context;
};

export const useCartActions = () => {
  const { dispatch } = useCart();

  const addItem = (item) => {
    dispatch({ type: "ADD_ITEM", payload: item });
  };

  const removeItem = (item) => {
    dispatch({ type: "REMOVE_ITEM", payload: item });
  };

  return { addItem, removeItem };
};

import React from "react";
import { useCart, useCartActions } from "./CartContext";

const ShoppingCart = () => {
  const { state } = useCart();
  const { addItem, removeItem } = useCartActions();

  return (
    <div>
      <h1>Shopping Cart</h1>
      <ul>
        {state.items.map((item) => (
          <li key={item.id}>
            {item.name} - ${item.price}
            <button onClick={() => removeItem(item)}>Remove</button>
          </li>
        ))}
      </ul>
      <p>Total: ${state.total}</p>
      <button onClick={() => addItem({ id: 3, name: "New Item", price: 20 })}>
        Add Item
      </button>
    </div>
  );
};

export const useDynamicValue = () => {
  const [value, setValue] = useState(0);

  const increment = () => setValue((prev) => prev + 1);
  const decrement = () => setValue((prev) => prev - 1);

  return { value, increment, decrement };
};

const App = () => (
  <ThemeProvider>
    <AuthProvider>
      <MainComponent />
    </AuthProvider>
  </ThemeProvider>
);

useEffect(() => {
  fetchData();
}, [dependency]);

const memoizedValue = useMemo(() => calculateExpensiveValue(data), [data]);

try {
  const response = await fetchData();
  setData(response);
} catch (error) {
  console.error("Data fetch failed:", error);
}

// 例: 認証状態とテーマを別々のContextで管理
const AuthContext = createContext();
const ThemeContext = createContext();

const memoizedValue = useMemo(() => computeExpensiveValue(data), [data]);
const memoizedCallback = useCallback(() => handleAction(param), [param]);

const ChildComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

const { theme } = useContext(ThemeContext); // 必要な値だけを取得

if (loading) return <Spinner />;
if (error) return <ErrorComponent />;
return <MainComponent />;

import useSWR from "swr";

const { data, error } = useSWR("/api/data", fetcher);

const [localState, setLocalState] = useState(initialValue);

import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const context = useContext(ThemeContext);

  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }

  return context;
};

import React from "react";
import { useTheme } from "./ThemeContext";

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === "light" ? "Dark" : "Light"} Mode
    </button>
  );
};

export default ThemeToggleButton;

import React from "react";
import { useTheme } from "./ThemeContext";

const ThemedComponent = () => {
  const { theme } = useTheme();

  const style = {
    backgroundColor: theme === "light" ? "#fff" : "#333",
    color: theme === "light" ? "#000" : "#fff",
    padding: "20px",
    textAlign: "center",
  };

  return <div style={style}>Current Theme: {theme}</div>;
};

export default ThemedComponent;

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "./ThemeContext";
import ThemeToggleButton from "./ThemeToggleButton";
import ThemedComponent from "./ThemedComponent";

const App = () => (
  <ThemeProvider>
    <ThemeToggleButton />
    <ThemedComponent />
  </ThemeProvider>
);

ReactDOM.render(<App />, document.getElementById("root"));

useEffect(() => {
  const savedTheme = localStorage.getItem("theme") || "light";
  setTheme(savedTheme);
}, []);

useEffect(() => {
  localStorage.setItem("theme", theme);
}, [theme]);