React context with hooks

react-context.js

export const AppContextProvider = ({ initialData, children }) => {

    const mergedInitialData = { ...defaults, ...initialData }
    const [data, setData] = useState(mergedInitialData)

    useEffect(() => {
        //I/O
        console.log(`ctx Update:`, data)
    }, [data])

    const value = {
        data,
        setData: (values => setData({ ...data, ...values })),
    }
    return (
        <AppContext.Provider value={value}>
            {children}
        </AppContext.Provider>
    )
}

//wrap the app with the context provider

   <AppContextProvider initialData={data}>
      <ThemeProvider theme={theme}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ThemeProvider>
    </AppContextProvider>

//use the context
const LoginPage = (props) => {

  
  const ctx = useContext(AppContext)
  const logout = !ctx.data.user ? null : (
    <Button href={`/api/auth/logout`} >Logout {ctx.data.user.username}</Button>
  )
  return ({logout})
}
//IFTTT