react-cookie

React¹⁷.0.2, react-cookie⁴.0.3, Created at July 21, 2021, Read Series…

Chose react-cookie

npm install react-cookie

useCookies, cookies, setCookie, and useEffect in src/App.tsx

[Try to understand] useCookies, cookies, setCookie, useEffect
and cookies[‘cookieTest’]. “cookieTest” is the key testing cookie. “abcdefg-123” is the cookie value and path: ‘/’. The cookie key-value is set when page load via useEffect.
[Try to understand] useEffect with ,[] at the end, is equivalent of componentDidMount in class component.

import { useCookies } from 'react-cookie';
...
export default function App() {
...
  const [cookies, setCookie] = useCookies(['cookieTest']);
  useEffect(() => {
    setCookie('cookieTest', 'abcdefg-123', { path: '/' })
  }, [])
  return (
...
  {/* Basic-1.6. react-cookie */}
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMore />} aria-controls="panel2a-content" id="panel2a-header-basic-1.2">
            <Typography>Basic-1.6. react-cookie - 
                  {cookies['cookieTest']}</Typography>
          </AccordionSummary>
          <AccordionDetails>
           {cookies['cookieTest']}       
          </AccordionDetails>
        </Accordion>
...
  );
}

<CookiesProvider/> in src/index.tsx

[Try to understand] <CookiesProvider/>

// imports 
...
import { CookiesProvider } from 'react-cookie';
ReactDOM.render(
  <Suspense fallback={<div>...</div>}> 
   <CookiesProvider>
      {/* Wrap your original code here */}
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <BrowserRouter>
            <CssBaseline />
            <App />
          </BrowserRouter>
        </ThemeProvider>
      </Provider>
    </CookiesProvider>
  </Suspense>,
  document.querySelector('#root'),
);
reportWebVitals();

Github commits is here: Basic-1.6. react-cookie

Conclusion

react-cookieis built on top of universal-cookie