Merge pull request #161 from marcoandre1/release

[MERGE]: release to master

CHANGELOG.md

@@ -1,5 +1,52 @@
 # CHANGELOG
 
+## v3.0.0
+
+- [Upgrade to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html)
+
+  > To install the latest version of React:
+  > `npm install react react-dom`
+  >
+  > **NOTE:** see commit details [Bump react react-dom](https://github.com/marcoandre1/marcoandre1.github.io/pull/159/commits/280782c7e3082f9a06c4595437ba8dc36452f70c)
+
+- Fix #162 [BUG]: hydrateRoot(...): Target container is not a DOM element. **Particular attention to the parameters inversion in the NEW hydrate function:** `hydrate(<App tab="home" />, container)` vs `hydrateRoot(container, <App tab="home" />)`.
+
+  Extract from [How to Upgrade to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html):
+
+  > Finally, if your app uses server-side rendering with hydration, upgrade `hydrate` to `hydrateRoot`:
+  >
+  > ```js
+  > // Before
+  > import { hydrate } from 'react-dom';
+  > const container = document.getElementById('app');
+  > hydrate(<App tab="home" />, container);
+  >
+  > // After
+  > import { hydrateRoot } from 'react-dom/client';
+  > const container = document.getElementById('app');
+  > const root = hydrateRoot(container, <App tab="home" />);
+  > // Unlike with createRoot, you don't need a separate root.render() call here.
+  > ```
+
+- [Upgrade to React Router v6](https://reactrouter.com/en/main/upgrading/v5#upgrade-to-react-router-v6)
+  
+  > Upgrade all `<Switch>` elements to `<Routes>`.
+  > `<Route exact>` is gone.
+  >  `<Route element>` replaces `<Route render>` props. (see [Upgrade to React Router v5.1](https://reactrouter.com/en/main/upgrading/v5#upgrade-to-react-router-v51))
+  > `useParams` inside your route component retrieves params. (see [Upgrade to React Router v5.1](https://reactrouter.com/en/main/upgrading/v5#upgrade-to-react-router-v51))
+  >
+  > **NOTE:** see commit details [Bump react-router-dom to v6](https://github.com/marcoandre1/marcoandre1.github.io/pull/159/commits/4f3492e6825f86e43632894873ab50c95082e88f)
+
+- Upgrade to react-redux 8
+  
+  > Add [useSelector()](https://react-redux.js.org/api/hooks#useselector) hook
+  > Allows you to extract data from the Redux store state, using a selector function.
+  > The selector is approximately equivalent to the mapStateToProps argument to connect conceptually.
+  >
+  > **NOTE:** I had to change to `useSelector()` in the `Dashboard` component instead of `mapStateToProps()` because of the upgrade to **React router v6**. See commit details [Add useSelector hook](https://github.com/marcoandre1/marcoandre1.github.io/pull/159/commits/dc358303620d89afb5ff16f37210c380a07299a9)
+
+- Bump `@headlessui/react` because previous version incompatible with **React 18**.
+
 ## v2.0.5
 
 - Add `"puppeteerArgs": ["--no-sandbox", "--disable-setuid-sandbox"]` in `package.json` as recommended in [README](https://github.com/stereobooster/react-snap#containers-and-other-restricted-environments):