React hooks useContext 切り出し

切り出されたコンテキスト。

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

export const QuxContext = createContext()

export function QuxContextProvider(props) {
  const [value, setValue] = useState(0)

  return (
    <QuxContext.Provider value={[value, setValue]}>
      {props.children}
    </QuxContext.Provider>
  )
}

親、子、孫コンポーネント。

import React from 'react';
import BarComponent from '../BarComponent/BarComponent';
import { QuxContextProvider } from '../../QuxContext';

const FooComponent = () => {
  return (
    <div className="App">
      FooComponent
      <QuxContextProvider>
        <BarComponent/>
      </QuxContextProvider>
    </div>
  )
};

export default FooComponent;

import React, { useContext, useState } from 'react';
import BazComponent from '../BazComponent/BazComponent';
import { QuxContext } from '../../QuxContext';

const BarComponent = () => {
  const [value, setValue] = useContext(QuxContext)

  return (
    <div className="App">
      BarComponent
      <div><button onClick={() => setValue(value + 1)}>increment</button></div>
      <div>{value}</div>
      <BazComponent />
    </div>
  )
};

export default BarComponent;

import React, { useContext, useState } from 'react';
import { QuxContext } from '../../QuxContext';

const BazComponent = () => {
  const [value, setValue] = useContext(QuxContext)

  return (
    <div className="App">
      BazComponent<br/>
      <div><button onClick={() => setValue(value + 1)}>increment</button></div>
      <div>{value}</div>
    </div>
  )
};

export default BazComponent;