React hooks useContext

え、useContextがあったらReduxいらないってこと…？

import React, { useState, useEffect } from 'react';
import BarComponent from '../BarComponent/BarComponent';

export const UserCount = React.createContext()

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

  return (
    <div className="App">
      FooComponent Component<br />
      <button onClick={() => setCount(count + 1)}>increment</button>
      <UserCount.Provider value={[count, setCount]}>
      <BarComponent />
      </UserCount.Provider>
    </div>
  )
};

export default FooComponent;

import React from 'react';
import BazComponent from '../BazComponent/BazComponent';

const BarComponent = () => (
  <div className="App">
    BarComponent Component
    <BazComponent />
  </div>
);

export default BarComponent;

import React, {useContext} from 'react';
import { UserCount } from '../FooComponent/FooComponent';

const BazComponent = () => {
  const [count, setCount] = useContext(UserCount)

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

export default BazComponent;