Nick Carbone codenickycode

Adapted from RemcoProgrammer's answer here:

Use Case	Solution	Example
Backend Cache	React Query, Apollo Client	fetch response
Navigation State	React Router	URL, params, history state
Component State (and subtree)	useState, custom hooks	is this thing currently open, what are the form contents and errors, what page of the table are we looking at
Unchanging Global State	useContext	auth, theme, language choice
Changing Global State	Redux, Zustand	dashboard data

https://beta.reactjs.org/learn/editor-setup#:~:text=If%20your%20ESLint,your%20continuous%20integration.

If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend to disable all formatting rules in your ESLint preset using eslint-config-prettier so that ESLint is only used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use prettier --check for your continuous integration.

https://beta.reactjs.org/learn/your-first-component#nesting-and-organizing-components

Components can render other components, but you must never nest their definitions:

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
 // ...

https://beta.reactjs.org/learn/rendering-lists#rules-of-keys

Rules of keys

Keys must be unique among siblings. However, it’s okay to use the same keys for JSX nodes in different arrays.
Keys must not change or that defeats their purpose! Don’t generate them while rendering.

Pitfall

You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.

Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.

https://beta.reactjs.org/learn/passing-data-deeply-with-context#before-you-use-context

Before you use context

Context is very tempting to use! However, this also means it’s too easy to overuse it. Just because you need to pass some props several levels deep doesn’t mean you should put that information into context.

Here’s a few alternatives you should consider before using context:

Start by passing props. If your components are not trivial, it’s not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you’ve made the data flow explicit with props.
Extract components and pass JSX as children to them. If you pass some data through many layers of intermediate components that don’t use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts

	# MacOs
	ipconfig getifaddr en0

	# Windows
	ipconfig /all

	# Linux
	hostname -I

	# List all running containers
	docker ps

	# List all running and stopped containers
	docker ps -a

	# List all local images
	docker images

	# List all volumes

	# Argument outside the build stage
	# To be used in first FROM
	ARG <key>=<value>

	# Parent image
	FROM [--platform=<platform>] <image> [AS <name>]
	# or
	FROM [--platform=<platform>] <image>[:<tag>] [AS <name>]
	# or
	FROM [--platform=<platform>] <image>[@<digest>] [AS <name>]

	import path from 'path';
	import { fileURLToPath } from 'url';

	const currentModuleURL = import.meta.url;

	const pathToFile = fileURLToPath(currentModuleURL);
	console.log(pathToFile);
	//=> /Users/nick/Repos/node-test/path.js

	console.log(path.dirname(pathToFile));

	// https://beta.reactjs.org/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback

	// in the function body
	const itemsRef = useRef(null);

	function getMap() {
	if (!itemsRef.current) {
	// Initialize the Map on first usage.
	itemsRef.current = new Map();
	}