Reactのコンポーネント間データフローを整理するベストプラクティス10選

  function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
  }

  // 使用例
  <Greeting name="Alice" />

  function Counter() {
    const [count, setCount] = React.useState(0);

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

function Parent() {
  const [value, setValue] = React.useState("Initial Value");

  return (
    <div>
      <Child value={value} onChange={(newValue) => setValue(newValue)} />
    </div>
  );
}

function Child(props) {
  return (
    <input
      type="text"
      value={props.value}
      onChange={(e) => props.onChange(e.target.value)}
    />
  );
}

function Parent() {
  const message = "Hello from Parent!";
  return <Child message={message} />;
}

function Child(props) {
  return <h1>{props.message}</h1>;
}

function Parent() {
  const user = { name: "Alice", age: 25 };
  return <Child user={user} />;
}

function Child(props) {
  return <p>{`Name: ${props.user.name}, Age: ${props.user.age}`}</p>;
}

function Child(props) {
  return <h1>{props.message}</h1>;
}

Child.defaultProps = {
  message: "Default Message",
};

import PropTypes from "prop-types";

function Child(props) {
  return <h1>{props.message}</h1>;
}

Child.propTypes = {
  message: PropTypes.string.isRequired,
};

function Parent() {
  const handleChildClick = (message) => {
    console.log("Received from child:", message);
  };

  return <Child onButtonClick={handleChildClick} />;
}

function Child(props) {
  return (
    <button onClick={() => props.onButtonClick("Hello from Child!")}>
      Click Me
    </button>
  );
}

function Parent() {
  const [name, setName] = React.useState("");

  const handleNameChange = (newName) => {
    setName(newName);
  };

  return (
    <div>
      <p>Name: {name}</p>
      <Child onNameChange={handleNameChange} />
    </div>
  );
}

function Child(props) {
  return (
    <input
      type="text"
      onChange={(e) => props.onNameChange(e.target.value)}
      placeholder="Enter your name"
    />
  );
}

function Parent() {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return <Child onIncrement={increment} />;
}

function Child(props) {
  return <button onClick={props.onIncrement}>Increment</button>;
}

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

// コンテキストの作成
const ThemeContext = createContext();

// プロバイダーコンポーネント
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

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

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

// コンシューマー
function ThemeToggleButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button onClick={toggleTheme}>
      Current Theme: {theme} (Click to Toggle)
    </button>
  );
}

// アプリケーション
function App() {
  return (
    <ThemeProvider>
      <ThemeToggleButton />
    </ThemeProvider>
  );
}

export default App;

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

  const value = React.useMemo(() => ({ theme, setTheme }), [theme]);

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

import { createStore } from "redux";

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    case "DECREMENT":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

store.dispatch({ type: "INCREMENT" }); // countが1に更新

import { atom, selector, useRecoilState, useRecoilValue } from "recoil";

const counterAtom = atom({
  key: "counter",
  default: 0,
});

const counterSelector = selector({
  key: "counterSelector",
  get: ({ get }) => get(counterAtom) * 2,
});

function Counter() {
  const [count, setCount] = useRecoilState(counterAtom);
  const doubleCount = useRecoilValue(counterSelector);

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

// Containerコンポーネント
function UserContainer() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch("https://api.example.com/user")
      .then((response) => response.json())
      .then((data) => setUser(data));
  }, []);

  return <UserPresenter user={user} />;
}

// Presenterコンポーネント
function UserPresenter({ user }) {
  if (!user) return <p>Loading...</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

// カスタムフック
function useUserData() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch("https://api.example.com/user")
      .then((response) => response.json())
      .then((data) => setUser(data));
  }, []);

  return user;
}

// コンポーネント
function UserComponent() {
  const user = useUserData();

  if (!user) return <p>Loading...</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

function DataFetcher({ url, render }) {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);

  return render(data);
}

function App() {
  return (
    <DataFetcher
      url="https://api.example.com/user"
      render={(data) =>
        data ? <p>{data.name}</p> : <p>Loading...</p>
      }
    />
  );
}

import { atom } from "recoil";

export const todoListState = atom({
  key: "todoListState",
  default: [],
});

import { useRecoilState } from "recoil";
import { todoListState } from "./todoAtoms";

export function useTodoList() {
  const [todos, setTodos] = useRecoilState(todoListState);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text, isComplete: false }]);
  };

  const toggleComplete = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, isComplete: !todo.isComplete } : todo
    ));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return { todos, addTodo, toggleComplete, deleteTodo };
}

import React from "react";
import { useTodoList } from "./useTodoList";
import TodoPresenter from "./TodoPresenter";

function TodoContainer() {
  const { todos, addTodo, toggleComplete, deleteTodo } = useTodoList();

  return (
    <TodoPresenter
      todos={todos}
      addTodo={addTodo}
      toggleComplete={toggleComplete}
      deleteTodo={deleteTodo}
    />
  );
}

export default TodoContainer;

function TodoPresenter({ todos, addTodo, toggleComplete, deleteTodo }) {
  const [newTask, setNewTask] = React.useState("");

  const handleAddTodo = () => {
    if (newTask.trim()) {
      addTodo(newTask);
      setNewTask("");
    }
  };

  return (
    <div>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Add a new task"
      />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{ textDecoration: todo.isComplete ? "line-through" : "none" }}
              onClick={() => toggleComplete(todo.id)}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoPresenter;

import { selector } from "recoil";
import { todoListState } from "./todoAtoms";

export const filteredTodoListState = selector({
  key: "filteredTodoListState",
  get: ({ get }) => {
    const filter = get(todoFilterState);
    const list = get(todoListState);

    switch (filter) {
      case "completed":
        return list.filter((item) => item.isComplete);
      case "uncompleted":
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  },
});