weaponsforge/react-hooks-playground

A NextJS app playground for testing using react hooks.

react-hooks-playground

A React (NextJS) playground for testing using react hooks.

Requirements

The following dependecies are used for this project. Feel free to experiment using other dependencies and versions.

1. Windows 64-bit OS
2. nvm version 1.1.9 (for Windows)
   • NOTE: Using nvm is optional if you want to continue using your pre-installed NodeJS.
3. NodeJS LTS v18.14.2 installed using nvm
   • node v18.14.2
   • npm v9.5.0

   • NOTE: We will use v18.14.2 for the official production client and server builds but feel free to use other NodeJS versions by setting "engine-strict=false" in the .npmrc file when working on localhost development as needed, but please use v18.14.2 when installing new modules. Do not commit the package.json or package-lock.json files should they change when "engine-strict=false".

4. React Developer Tools (optional) [link]
   • The React Developer Tools is a web browser extension for debugging React apps.
   • It's best to view these demos with the React Profiler, one of the tools available in the React Developer Tools for observing the components re-rendering on state updates.
   • Install for Chrome
   • Install for Firefox
   • Install for Edge

Core Libraries and Frameworks

• Client app
  • NextJS 13.2.4
  • React 18.2.0

Installation

1. Clone this repository.
   https://github.com/weaponsforge/react-hooks-playground.git

2. Follow the instructions on the README files inside the /client directory for more information on configuring and using the NextJS client app.

Quick Usage Guide

Manual Installation and Usage

It's best to view these demos with the React Profiler, one of the tools available in the React Developer Tools for observing the components re-rendering on state updates.

1. Navigate to the /client directory from the commandline.
2. Create a .env file from the /client/.env.example file. Copy its content when working on localhost.
3. Run: npm run install
4. Run: npm run dev
5. Open the localhost website on http://localhost:3000

Using the React Profiler

1. Open the React Profiler in the web browser's developer console.
2. Run the demos and observe the components re-rendering. The Profiler highlights rendered components.

Localhost Development Using Docker

NOTE: Requires Docker installed on the development machine.

1. Navigate the the repository's root directory from the commandline.
2. Run the docker compose commands:
   

   # Build the image
   docker compose build
   
   # Start/stop the docker image
   docker compose up/down
   

@weaponsforge
20230319

react-hooks-playground's Issues

Test using several react design patterns

Checkout the reference for more information.

• container and presentational components
• higher-order components (HOCs)
• Render props
• Hooks
• Context API

Test using useMemo

Test using memo

Test using React's memo() hook. Take note of it's difference from the useMemo() hook on #3.

References:
^[1] React memo vs. useMemo major differences and use cases

Test using RTK Query

• Test using redux-toolkit's query (RTK Query) - createApi
• Use the sample apps for reference:
  • iSlayer/my-phonebook
  • ExpeditionRPG/expedition

Test using zustand

Test using zustand.

• zustand

Test using Immer

References:

^[1] Immer docs
^[2] Using Immer to Optimise Redux Reducer

Test using useQuery

Test using react-query. Check out the following for reference.

• query docs
• query repo

Test using useId

Test using useReducer

Client app setup

• Create a new NextJS (v13) app
• Set-up eslint rules
• Create a GitHub actions workflow for linting the app on push to every branch except master
• Set up a localhost Docker environment

Test using swr

Test using swr for data fetching

Test using useRef

Test using useSyncExternalStore

References

^[1] useSyncExternalStore docs
^[2] UseSyncExternalStore to Manage Global State in React

Test using useCallback