class ProfilePage extends React.Component {
  state = {
    count: 0,
  }
  render() {
    return (
      <>
        <p>Count: {count}</p>
        <button onClick={() => this.setState({ count: count + 1 })}>
          Increment
        </button>
      </>
    )
  }
}

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

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

class ProfilePage extends React.Component {
  state = {
    user: null,
  };
  componentDidMount() {
    this.fetchData(this.props.id);
  }
  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.fetchData(this.props.id);
    }
  }
  async fetchData(id) {
    const user = await fetchUser(id);
    this.setState({ user });
  }
  render() {
    ...
  }
}
class ProfilePage extends React.Component {
  state = {
    user: null,
  };
  componentDidMount() {
    this.fetchData(this.props.id);
  }
  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.fetchData(this.props.id);
    }
  }
  async fetchData(id) {
    const user = await fetchUser(id);
    this.setState({ user });
  }
  render() {
    ...
  }
}

function ProfilePage ({ id }) {
  const [user, setUser] = React.useState(null)
  
  React.useEffect(() => {
    const fetchData = async (id) => {
      const user = await fetchUser(id);
      setUser(user)
    }
  
    fetchData(id)
  }, [id])
  
  ...
}
function ProfilePage ({ id }) {
  const [user, setUser] = React.useState(null)
  
  React.useEffect(() => {
    const fetchData = async (id) => {
      const user = await fetchUser(id);
      setUser(user)
    }
  
    fetchData(id)
  }, [id])
  
  ...
}

function DataGrid ({ data, columns }) {
  const rows = React.useMemo(() => {
    // expensive function
    return computeRows({ data, columns })
  }, [data, columns])
  
  ...
}
function DataGrid ({ data, columns }) {
  const rows = React.useMemo(() => {
    // expensive function
    return computeRows({ data, columns })
  }, [data, columns])
  
  ...
}

function App() {
  const stuff = useCustomHook()
 
  return ...
}

function App() {
  return (
    <Auth>
      {({ jwt }) => (
        <User jwt={jwt}>
          {({ userId }) => (
            <Filters>
              {({ filter }) => (
                <Todos userId={userId} filter={activeFilter}>
                  {({ todos, isLoading, error }) => (
                    <div>
                      {isLoading
                        ? 'Loading...'
                        : error
                        ? 'Error!'
                        : todos.map(todo => <Todo todo={todo} />)}
                    </div>
                  )}
                </Todos>
              )}
            </Filters>
          )}
        </User>
      )}
    </Auth>
  )
}

function App() {
  const jwt = useAuth()
  const { userID } = useUser({ jwt })
  const { activeFilter } = useFilters()
  const { todos, isLoading, error } = useTodos({
    userId,
    filter: activeFilter
  })
 
  return (
    <div>
      {isLoading
        ? 'Loading...'
        : error
        ? 'Error!'
        : todos.map(todo => <Todo todo={todo} />)}
    </div>
  )
}

function App () {
  const [isDark, setIsDark] = React.useState(false)
 
  const theme = isDark ? themes.dark : themes.light
 
  return (
    <ThemeProvider theme={theme}>
      ...
    </ThemeProvider>
  )
}
function App () {
  const [isDark, setIsDark] = React.useState(false)
 
  const theme = isDark ? themes.dark : themes.light
 
  return (
    <ThemeProvider theme={theme}>
      ...
    </ThemeProvider>
  )
}

const matchDark = '(prefers-color-scheme: dark)'
 
function App() {
  const [isDark, setIsDark] = React.useState(
    () => window.matchMedia(matchDark).matches
  )
  
  ...
}

  ...
 
  React.useEffect(() => {
    const matcher = window.matchMedia(matchDark)
    const onChange = ({ matches }) => setIsDark(matches)
    
    matcher.addListener(onChange)
    
    return () => {
      matcher.removeListener(onChange)
    }
  }, [setIsDark])
 
  ...

const matchDark = '(prefers-color-scheme: dark)'
 
function App() {
  const [isDark, setIsDark] = React.useState(
    () => window.matchMedia && window.matchMedia(matchDark).matches
  )
 
  React.useEffect(() => {
    const matcher = window.matchMedia(matchDark)
    const onChange = ({ matches }) => setIsDark(matches)
    matcher.addListener(onChange)
    return () => {
      matcher.removeListener(onChange)
    }
  }, [setIsDark])
 
  const theme = isDark ? themes.dark : themes.light
 
  return <ThemeProvider theme={theme}>...</ThemeProvider>
}
const matchDark = '(prefers-color-scheme: dark)'
 
function App() {
  const [isDark, setIsDark] = React.useState(
    () => window.matchMedia && window.matchMedia(matchDark).matches
  )
 
  React.useEffect(() => {
    const matcher = window.matchMedia(matchDark)
    const onChange = ({ matches }) => setIsDark(matches)
    matcher.addListener(onChange)
    return () => {
      matcher.removeListener(onChange)
    }
  }, [setIsDark])
 
  const theme = isDark ? themes.dark : themes.light
 
  return <ThemeProvider theme={theme}>...</ThemeProvider>
}

import useDarkMode from './useDarkMode'
 
function App() {
  const theme = useDarkMode()
    ? themes.dark
    : themes.light
 
  return (
    <ThemeProvider theme={theme}>
      ...
    </ThemeProvider>
  )
}

function Menu () {
  return (
    <div>
      ...
    </div>
  )
}

import useClickOutside from './useClickOutside'
 
function Menu() {
  const menuRef = React.useRef()
  
  const onClickOutside = () => {
    console.log('Clicked Outside!')
  }
  
  useClickOutside(menuRef, onClickOutside)
  
  return (
    <div ref={menuRef}>
      ...
    </div>
  )
}
import useClickOutside from './useClickOutside'
 
function Menu() {
  const menuRef = React.useRef()
  
  const onClickOutside = () => {
    console.log('Clicked Outside!')
  }
  
  useClickOutside(menuRef, onClickOutside)
  
  return (
    <div ref={menuRef}>
      ...
    </div>
  )
}
import useClickOutside from './useClickOutside'
 
function Menu() {
  const menuRef = React.useRef()
  
  const onClickOutside = () => {
    console.log('Clicked Outside!')
  }
  
  useClickOutside(menuRef, onClickOutside)
  
  return (
    <div ref={menuRef}>
      ...
    </div>
  )
}
import useClickOutside from './useClickOutside'
 
function Menu() {
  const menuRef = React.useRef()
  
  const onClickOutside = () => {
    console.log('Clicked Outside!')
  }
  
  useClickOutside(menuRef, onClickOutside)
  
  return (
    <div ref={menuRef}>
      ...
    </div>
  )
}
import useClickOutside from './useClickOutside'
 
function Menu() {
  const menuRef = React.useRef()
  
  const onClickOutside = () => {
    console.log('Clicked Outside!')
  }
  
  useClickOutside(menuRef, onClickOutside)
  
  return (
    <div ref={menuRef}>
      ...
    </div>
  )
}

function useClickOutside(elRef, callback) {
  ...
}

function useClickOutside(elRef, callback) {
  React.useEffect(() => {
 
    const handleClickOutside = e => {
      if (!elRef?.current?.contains(e.target) && callback)
        callback(e)
      }
    }
 
    document.addEventListener('click', handleClickOutside, true)
    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }
  }, [callback, elRef])
}
function useClickOutside(elRef, callback) {
  React.useEffect(() => {
 
    const handleClickOutside = e => {
      if (!elRef?.current?.contains(e.target) && callback)
        callback(e)
      }
    }
 
    document.addEventListener('click', handleClickOutside, true)
    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }
  }, [callback, elRef])
}
function useClickOutside(elRef, callback) {
  React.useEffect(() => {
 
    const handleClickOutside = e => {
      if (!elRef?.current?.contains(e.target) && callback)
        callback(e)
      }
    }
 
    document.addEventListener('click', handleClickOutside, true)
    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }
  }, [callback, elRef])
}
function useClickOutside(elRef, callback) {
  React.useEffect(() => {
 
    const handleClickOutside = e => {
      if (!elRef?.current?.contains(e.target) && callback)
        callback(e)
      }
    }
 
    document.addEventListener('click', handleClickOutside, true)
    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }
  }, [callback, elRef])
}
function useClickOutside(elRef, callback) {
  React.useEffect(() => {
 
    const handleClickOutside = e => {
      if (!elRef?.current?.contains(e.target) && callback)
        callback(e)
      }
    }
 
    document.addEventListener('click', handleClickOutside, true)
    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }
  }, [callback, elRef])
}

import useClickOutside from './useClickOutside'
 
function Menu () {
  const menuRef = React.useRef()
  
  const onClickOutside = () => {
    console.log('Clicked Outside!')
  }
  
  useClickOutside(menuRef, onClickOutside)
  
  return (
    <div ref={menuRef}>
      ...
    </div>
  )
}

React.useEffect(() => {
  ...
}, [])

function useClickOutside(elRef, callback) {
  
  
  
  React.useEffect(() => {
 
    const handleClickOutside = e => {
      if (elRef?.current?.contains(e.target) && callback)
        callback(e)
      }
    }
 
    document.addEventListener('click', handleClickOutside, true)
    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }
  }, [callback, elRef])
}

import useClickOutside from './useClickOutside'
 
function Menu () {
  const menuRef = React.useRef()
  
  const onClickOutside = () => {
    console.log('Clicked Outside!')
  }
  
  useClickOutside(menuRef, onClickOutside)
  
  return (
    <div ref={menuRef}>
      ...
    </div>
  )
}

function useClickOutside(elRef, callback) {
  const callbackRef = React.useRef()
  callbackRef.current = callback
  
  React.useEffect(() => {
 
    const handleClickOutside = e => {
      if (elRef?.current?.contains(e.target) && callbackRef.current)
        callbackRef.current(e)
      }
    }
 
    document.addEventListener('click', handleClickOutside, true)
    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }
  }, [callbackRef, elRef])
}

function Todos () {
  const { todos } = useStore()
}

import { useSelector } from 'react-redux'
import { createSelector } from 'reselect'
 
const selectNumOfDoneTodos = createSelector(
  state => state.todos,
  todos => todos.filter(todo => todo.isDone).length
)
 
function Todos () {
  const NumOfDoneTodos = useSelector(selectNumOfDoneTodos)
  return <div>{NumOfDoneTodos}</div>
}

const context = React.createContext()
 
export const StoreProvider = ({ children, initialState = {} }) => {
  const [store, setStore] = React.useState(() => initialState)
 
  const contextValue = React.useMemo(() => [store, setStore], [store])
 
  return (
    <context.Provider value={contextValue}>
      {children}
    </context.Provider>
  )
}
 
export default function useStore() {
  return React.useContext(context)
}
const context = React.createContext()
 
export const StoreProvider = ({ children, initialState = {} }) => {
  const [store, setStore] = React.useState(() => initialState)
 
  const contextValue = React.useMemo(() => [store, setStore], [store])
 
  return (
    <context.Provider value={contextValue}>
      {children}
    </context.Provider>
  )
}
 
export default function useStore() {
  return React.useContext(context)
}
const context = React.createContext()
 
export const StoreProvider = ({ children, initialState = {} }) => {
  const [store, setStore] = React.useState(() => initialState)
 
  const contextValue = React.useMemo(() => [store, setStore], [store])
 
  return (
    <context.Provider value={contextValue}>
      {children}
    </context.Provider>
  )
}
 
export default function useStore() {
  return React.useContext(context)
}

import { StoreProvider } from './useStore'
 
const initialState = {
  todos: []
}
 
function App () {
  return (
    <StoreProvider initialState={initialState}>
      <Todos />
    </StoreProvider>
  )
}

import useStore from './useStore'
 
function Todos () {
  const [{ todos }, setStore] = useStore()
 
  const addTodo () => {
    setStore(old => ({
      ...old,
      todos: [...old.todos, { name: 'New Todo' }]
    })
  }
  ...
}
import useStore from './useStore'
 
function Todos () {
  const [{ todos }, setStore] = useStore()
 
  const addTodo () => {
    setStore(old => ({
      ...old,
      todos: [...old.todos, { name: 'New Todo' }]
    })
  }
  ...
}

import { StoreProvider } from './useStore'
 
const initialState = {
  todos: []
}
 
const reducer = (state, action) => {
  switch (action.type) {
    case 'addTodo':
      return {
        ...state,
        todos: [
          ...state.todos,
          action.todo
        ]
      }
    default:
      throw new Error('Unknown action!', action);
  }
}
 
function App () {
  return (
    <StoreProvider reducer={reducer} initialState={initialState}>
      <Todos />
    </StoreProvider
  )
}
import { StoreProvider } from './useStore'
 
const initialState = {
  todos: []
}
 
const reducer = (state, action) => {
  switch (action.type) {
    case 'addTodo':
      return {
        ...state,
        todos: [
          ...state.todos,
          action.todo
        ]
      }
    default:
      throw new Error('Unknown action!', action);
  }
}
 
function App () {
  return (
    <StoreProvider reducer={reducer} initialState={initialState}>
      <Todos />
    </StoreProvider
  )
}

export function StoreProvider ({
  children,
  reducer,
  initialState = {}
}) {
  const [store, dispatch] = React.useReducer(
    reducer,
    initialState
  )
 
  const contextValue = React.useMemo(
    () => [store, dispatch],
    [store, dispatch]
  )
 
  return (
    <context.Provider value={contextValue}>
      {children}
    </context.Provider>
  )
}
export function StoreProvider ({
  children,
  reducer,
  initialState = {}
}) {
  const [store, dispatch] = React.useReducer(
    reducer,
    initialState
  )
 
  const contextValue = React.useMemo(
    () => [store, dispatch],
    [store, dispatch]
  )
 
  return (
    <context.Provider value={contextValue}>
      {children}
    </context.Provider>
  )
}

import useStore from './useStore'
 
function Todos () {
  const [{ todos }, dispatch] = useStore()
  
  const addTodo () => dispatch({
    type: 'addTodo',
    todo: {
      name: 'New Todo'
    }
  })
 
  return (
    <div>
      {todos.map(todo => (
        <Todo key={todo.id} todo={todo} />
      ))}
    </div>
  )
}

import useStore from './useStore'
 
function Todo ({ todo }) {
  const [, dispatch] = useStore()
 
  const handleClick = () => {
    dispatch({
      type: 'toggleTodo',
      todoId: todo.id
    })
  }
 
  return (
    <div onClick={handleClick}>{todo.name}</div>
  )
}

const storeContext = React.createContext()
const dispatchContext = React.createContext()
 
export const StoreProvider = ({ children, reducer, initialState = {} }) => {
  const [store, dispatch] = React.useReducer(reducer, initialState)
 
  return (
    <dispatchContext.Provider value={dispatch}>
      <storeContext.Provider value={store}>
        {children}
      </storeContext.Provider>
    </dispatchContext.Provider>
  )
}
 
export function useStore() {
  return React.useContext(storeContext)
}
 
export function useDispatch() {
  return React.useContext(dispatchContext)
}
const storeContext = React.createContext()
const dispatchContext = React.createContext()
 
export const StoreProvider = ({ children, reducer, initialState = {} }) => {
  const [store, dispatch] = React.useReducer(reducer, initialState)
 
  return (
    <dispatchContext.Provider value={dispatch}>
      <storeContext.Provider value={store}>
        {children}
      </storeContext.Provider>
    </dispatchContext.Provider>
  )
}
 
export function useStore() {
  return React.useContext(storeContext)
}
 
export function useDispatch() {
  return React.useContext(dispatchContext)
}

import { useStore } from './useStore'
import Todo from './Todo'
 
function Todos () {
  const { todos } = useStore()
 
  return (
    <div>
      {todos.map(todo => (
        <Todo key={todo.id} todo={todo} />
      ))}
    </div>
  )
}

import { useDispatch } from './useStore'
 
function Todo ({ todo }) {
  const dispatch = useDispatch()
 
  const handleClick = () => {
    dispatch({ type: 'toggleTodo', todoId: todo.id })
  }
 
  return (
    <div onClick={handleClick}>{todo.name}</div>	
  )
}

export default function makeStore (reducer, initialState) {
  const dispatchContext = React.createContext()
  const storeContext = React.createContext()
  
  const StoreProvider = ({ children }) => {
    const [store, dispatch] = React.useReducer(reducer, initialState)
  
    return (
      <dispatchContext.Provider value={dispatch}>
        <storeContext.Provider value={store}>
          {children}
        </storeContext.Provider>
      </dispatchContext.Provider>
    )
  }
  
  function useDispatch() {
    return React.useContext(dispatchContext)
  }
  
  function useStore() {
    return React.useContext(storeContext)
  }
 
  return [StoreProvider, useDispatch, useStore]
}
export default function makeStore (reducer, initialState) {
  const dispatchContext = React.createContext()
  const storeContext = React.createContext()
  
  const StoreProvider = ({ children }) => {
    const [store, dispatch] = React.useReducer(reducer, initialState)
  
    return (
      <dispatchContext.Provider value={dispatch}>
        <storeContext.Provider value={store}>
          {children}
        </storeContext.Provider>
      </dispatchContext.Provider>
    )
  }
  
  function useDispatch() {
    return React.useContext(dispatchContext)
  }
  
  function useStore() {
    return React.useContext(storeContext)
  }
 
  return [StoreProvider, useDispatch, useStore]
}

import makeStore from './makeStore'
 
const todosReducer = (state, action) => {...}
 
const [
  TodosProvider,
  useTodos,
  useTodosDispatch
] = makeStore(todosReducer, [])
 
export { TodosProvider, useTodos, useTodosDispatch }

import { TodosProvider } from './useTodosStore'
 
function App () {
  return (
    <TodosProvider>
        <Todos />
    </TodosProvider
  )
}
import { TodosProvider } from './useTodosStore'
 
function App () {
  return (
    <TodosProvider>
        <Todos />
    </TodosProvider
  )
}

import { TodosProvider } from './useTodosStore'
import { LayoutProvider } from './useLayoutStore'
 
function App () {
  return (
    <TodosProvider>
      <LayoutProvider>
        <Todos />
     </LayoutProvider>
    </TodosProvider
  )
}

import useClickOutside from './useClickOutside'
 
function Menu () {
  const menuRef = React.useRef()
  
  const onClickOutside = () => {
    console.log('Clicked Outside!')
  }
  
  useClickOutside(menuRef, onClickOutside)
  
  return (
    <div ref={menuRef}>
      ...
    </div>
  )
}

import useClickOutside from './useClickOutside'
import { useLayoutStore, useDispatch } from './useLayoutStore'
 
function App() {
  const { menuIsOpen } = useStore()
  const dispatch = useDispatch()
  const elRef = React.useRef()
 
  useClickOutside(elRef, () => 
    dispatch({ type: 'menuToggled', isOpen: false })
  )
 
  return (
    <div ref={elRef} onClick={handleOpen}>
      ...
    </div>
  )
}

export default function makeStore(userReducer, initialState, key) {
  const dispatchContext = React.createContext()
  const storeContext = React.createContext()
 
  try {
    initialState = JSON.parse(localStorage.getItem(key)) || initialState
  } catch {}
 
  const reducer = (state, action) => {
    const newState = userReducer(state, action)
    localStorage.setItem(key, JSON.stringify(newState))
    return newState
  }
 
  const StoreProvider = ({ children }) => {
    const [store, dispatch] = React.useReducer(reducer, initialState)
 
    return (
      <dispatchContext.Provider value={dispatch}>
        <storeContext.Provider value={store}>{children}</storeContext.Provider>
      </dispatchContext.Provider>
    )
  }
 
  function useDispatch() {
    return React.useContext(dispatchContext)
  }
 
  function useStore() {
    return React.useContext(storeContext)
  }
 
  return [StoreProvider, useDispatch, useStore]
}

import { useDispatch } from './useTodosStore'
 
function Todo ({ todo }) {
  const dispatch = useDispatch()
 
  const handleClick = () => {
    dispatch({ type: 'toggleTodo', todoId: todo.id })
  }
 
  return (
    <div onClick={handleClick}>{todo.name}</div>
  )
}

import { useTodos } from './useTodosStore'
 
function Todos () {
  const todos = useTodos()
 
  return (
    <div>
      {todos.map(todo => (
        <Todo key={todo.id} todo={todo} />
      ))}
    </div>
  )
}