React - atabegruslan/Notes GitHub Wiki

Setup

Deploy

Components, Elements & Instances

Component = Blueprint (like a Class) Component-Instance = Occurrence of a Component. Only for Class Components React-Element = A plain immutable JS object describing the instance/DOM-Element

Class vs Functional Components, when to use:

So functional components are simpler and seems to be the way of the future. They simply take props and render. Use class components only when you want more complex state management abilities.

For conversion between class <-> functional components, here's how: https://jsfiddle.net/atabegaslan/uspx4mLy/

Related concepts

Old & New

As of 2023/2024: Use Vite, dont use RCA, because RCA havent been maintained in ages.

More Theory

Lifecycle events & Hooks

The Hooks

useState

Only use state if:

  • Cannot be computed on each render, and,
  • No place else (eg browser storage) have that state, and,
  • Does not need to be rendered
  • Value isn't a derived value. (Derived value is eg: Formatted date from date)

Common mistakes:

So do this instead:

const [muted, setMuted] = useState(false);

const clickHandlerFunction = () => {
    console.log('muted before', muted);
    setMuted(!muted);
}
useEffect(() => {
    console.log('muted after', muted);
}, [muted])

useEffect

Don't overuse this. Stay away from useEffect by:

  • Derive value in each render
  • Respond to events with event handlers whenever you can
  • Fetch with a react-query or one of those other libraries specifically for fetching.

Common pitfalls:

Make it run only once (strict mode)

useMemo

Cache the result of expensive computations and won't recompute unless change

https://www.youtube.com/watch?v=THL1OPn72vo

useCallback

Cache functions

https://www.youtube.com/watch?v=IL82CzlaCys

Note: {// to complete}

Refs

Refs

https://www.youtube.com/watch?v=t4okzJc6_Ak

 `useRef` hook

https://www.youtube.com/watch?v=t2ypzz6gJm0&list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h
![](https://github.com/user-attachments/assets/0215914b-85c1-4a5f-b50a-963911634454) ``` // to complete ```

forwardRef

Passing ref to child

https://www.youtube.com/watch?v=RLWniwmfdq4

useImperativeHandle

To let parent control a functionality of child

useReducer

useContext

The related Provider Pattern example: https://github.com/Ruslan-Aliyev/ReactJS_ProviderPattern

Context API

For class components

https://www.youtube.com/watch?v=TENin-HxvRg

https://reactjs.org/docs/context.html

 `useContext` hook

For function components

https://www.youtube.com/watch?v=5LrDIWkK_Bc&list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h

 
//==App.js========================================
import React from 'react';
import PageContextProvider from './PageContextProvider';
import Header from './Header';
function App() {
    return (
        <div className="App">
            <PageContextProvider>
                <Header />
            </PageContextProvider>
        </div>
    );
}
export default App;
//==PageContextProvider.js=========================
import React, { useState, useEffect, createContext } from 'react';
export const PageContext = createContext();
const PageContextProvider = (props) => {
    const [user, setUser] = useState({
        'name': 'harry potter'
    });
    return (
        <PageContext.Provider value={{ user: user }}>
        	{props.children}
        </PageContext.Provider>
    );
}
export default PageContextProvider;
//==Header.js=====================================
import React, { Component } from 'react';
import { PageContext } from './PageContextProvider';
class Header extends Component {
    render() {
        return (
            <PageContext.Consumer>
                {user => {
                    return <div className="header">{user.name}</div>
                }}
            </PageContext.Consumer>
        );
    }
}
export default Header;

//==App.js========================================
import React from 'react';
import PageContextProvider from './PageContextProvider';
import Header from './Header';
function App() {
    return (
        <div className="App">
            <PageContextProvider>
                <Header />
            </PageContextProvider>
        </div>
    );
}
export default App;
//==PageContextProvider.js=========================
import React, { useState, useEffect, createContext } from 'react';
export const PageContext = createContext();
const PageContextProvider = (props) => {
    const [user, setUser] = useState({
        'name': 'harry potter'
    });
    return (
        <PageContext.Provider value={{ user: user }}>
        	{props.children}
        </PageContext.Provider>
    );
}
export default PageContextProvider;
//==Header.js=====================================
import React, { useContext } from 'react';
import { PageContext } from './PageContextProvider';
const Header = () => {
    const { user } = useContext(PageContext);
    return (
        <div className="header">{user.name}</div>
    );
}
export default Header;

So in summary:

useTransition & useDeferredValue for slow operations

useId

Custom Hooks & useDebugValue

https://www.w3schools.com/react/react_customhooks.asp

useFetch.js

import { useState, useEffect } from "react";

const useFetch = (url) => {
    const [data, setData] = useState(null);

    useEffect(() => {
    fetch(url)
        .then((res) => res.json())
        .then((data) => setData(data));
    }, [url]);

    useDebugValue(data ?? 'loading...'); // useDebugValue adds a label to this custom hook, which can be seen in the React dev tools console

    return [data];
};

export default useFetch;

index.js

import ReactDOM from "react-dom/client";
import useFetch from "./useFetch";

const Home = () => {
    const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

Additional Hooks

Better hooks for fetching (better than useState & useEffect):

https://www.npmjs.com/package/react-query has now became https://tanstack.com/query/latest/docs/framework/react/quick-start

Another example of tanstack/react-query & Form Submit: https://gist.github.com/atabegruslan/78b782f3cd39bcad6f8caa7dda32fd8f

React Router's or Next.js's usePathname

usePathname() returns the same thing as window.location.pathname

React 19

Simpler forwardRef

use

Simpler context retrieval using use hook

useFormStatus

Example: To prevent the form's submit button being repeatedly pressed during submission

useFormState

useActionState

https://react.dev/reference/react/useActionState

Optimistic update using useOptimistic

Example: After you send a message on a chat messenger. It will tell show you that the message has already been sent (for good user experience). Then when the message has actually been delivered, then it updates the message's status to 'delivered'.

Portal

Error Boundaries

Class component

https://www.youtube.com/watch?v=hszc3T0hdvU

 Function component

https://www.npmjs.com/package/react-error-boundary

 
class ErrorBoundary extends React.Component {
	constructor(props) {
		super(props);
		state = { hasError: false };
	}
	static getDerivedStateFromError(error) {
		return { hasError: true };
	}
	componentDidCatch(error, errorInfo) {
		errorService.log({ error, errorInfo });
	}
	render() {
		if (this.state.hasError) {
			return <h1>Oops, we done goofed up</h1>;
		}
		return this.props.children;
	}
}
ReactDOM.render(
	<ErrorBoundary>
		{/* This App have problems */}
		<App /> 
	</ErrorBoundary>,
	document.getElementById('root')
)

import {ErrorBoundary} from 'react-error-boundary'
function ErrorFallback({error, resetErrorBoundary}) {
	return (
		<div role="alert">
			<p>Something went wrong:</p>
			<pre>{error.message}</pre>
			<button onClick={resetErrorBoundary}>Try again</button>
		</div>
	)
}
const ui = (
	<ErrorBoundary FallbackComponent={ErrorFallback}
	onReset={() => {
		// reset the state of your app 
		// so the error doesn't happen again
	}}>
		<ComponentThatMayError />
	</ErrorBoundary>
)

Fragment

Code Split

Debugging

Component composition

Frameworks

Patterns

Flux, Redux, MobX, etc...

Redux Middlewares

General Tutorials

Specific Tutorials

Useful Basics

CSS

Scoping styles

Useful Libraries

Webpack

Others

Specific Topics

Proxying: Same back and front port

Router: Refreshing and Redirecting

Save-Dev flag

npm install [package_name] --save is used to save the package required for the application to run.
npm install [package_name] --save-dev is used to save the package for development purpose. Example: unit tests, minification..

Short Explanation https://stackoverflow.com/questions/22891211/what-is-the-difference-between-save-and-save-dev
Long Explanation https://stackoverflow.com/questions/33504641/whats-the-difference-between-save-and-save-dev-in-npm-install/33507291

Note 1: https://www.youtube.com/watch?v=w5TupxbnnrM&t=261s to 426s
Note 2: https://github.com/Microsoft/types-publisher/issues/81#issuecomment-234051338

More tutorials

⚠️ **GitHub.com Fallback** ⚠️