Code Notes made by Vaibhav Rathod

reactjs

8 min read

Written by Nirmit Kotadiya

📜 History

  • How:
    • Developed by Jordan Walke, a software engineer at Facebook, in 2011.
    • First deployed on Facebook’s newsfeed in 2011 and later on Instagram in 2012.
    • Inspired by XHP (an HTML component library for PHP) to improve UI development.
  • Who:
    • Created by Jordan Walke at Facebook (now Meta).
    • Maintained by Meta and a community of developers.
  • Why:
    • To build large-scale, dynamic web applications with better performance and maintainability.
    • To address the challenge of complex UI rendering and state management in JavaScript-heavy apps.
    • Promotes the component-based architecture for reusable and manageable code.

📘 Intro

  • React is an open-source JavaScript library used for building user interfaces, primarily for single-page applications. It enables developers to create large web applications that can update and render efficiently in response to data changes. React encourages a declarative and component-based programming model, promoting reusability and maintainability.

  • ✅ Advantages

    • Component-Based Architecture for better code reuse and scalability.
    • Virtual DOM enhances performance by minimizing direct DOM manipulation.
    • Strong ecosystem and community support with rich tooling (Redux, React Router, etc.).
    • Supports Asynchronous Programming (Promises, Async/Await).
    • Works well with JavaScript Design Patterns (Module, Singleton, Observer).
    • Embraces Prototypal Inheritance and ES6 Classes for advanced object-oriented capabilities.
    • Supports integration with TypeScript for typed JavaScript development.

⚠️ Disadvantages

  • Steeper learning curve due to JSX and component lifecycle understanding.
  • Browser inconsistencies in older or unsupported environments.
  • Lack of strong typing in plain JavaScript can lead to runtime errors.
  • Requires boilerplate setup (though improved via Create React App, Vite, Next.js, etc.).
  • Can get complex in large-scale applications, especially with deep component trees and state management.

🧾 Notes

📌 Core Concepts

  • JSX (JavaScript XML)
    Syntax extension allowing HTML to be written within JavaScript. It’s syntactic sugar for React.createElement().
  • Components
    Building blocks of React UIs. Two types:
    • Functional Components – Now standard with Hooks.
    • Class Components – Legacy, but still relevant in older codebases.
  • Props (Properties)
    Read-only inputs passed to components, making them reusable.
  • State
    Mutable data managed within components. Changes trigger re-renders.
  • Hooks
    Functions that let functional components use state and lifecycle features. Examples:
    • useState, useEffect, useContext, useReducer, useMemo etc…
  • Virtual DOM
    React maintains a lightweight copy of the real DOM and performs diffing to efficiently update the UI.

⚙️ Component Lifecycle (Class-Based)

  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()
  5. shouldComponentUpdate()
  6. getSnapshotBeforeUpdate()
  7. componentDidUpdate()
  8. componentWillUnmount()

🏗️ State Management Options

  • Local State – useState, useReducer
  • Global State – Context API, Redux, Zustand, Jotai
  • Server State – React Query, SWR
  • URL State – React Router, Next.js router

🧩 Common Patterns

  • Lifting State Up – Move state to the closest common ancestor.
  • Controlled vs Uncontrolled Components – Form input handling strategies.
  • Render Props / HOC (Higher-Order Components) – Patterns for reuse (being replaced by hooks).
  • Compound Components – Design pattern for interrelated components.

📌 1. JSX (JavaScript XML)

  • JSX allows mixing HTML with JavaScript.
  • Transpiled by Babel into React.createElement().

  • Example:

const element = <h1 className="greet">Hello, React!</h1>;
  • Expressions inside JSX: {}
    Only expressions (not statements) are allowed inside {}.

🧱 2. Components

➤ Functional Components

  • Modern standard using hooks.

  • Stateless until hooks like useState, useEffect are added.

function Greeting({ name }) {
return <h1>Hello, {name}</h1>;
}

➤ Class Components (Legacy)

  • Used with lifecycle methods.

class Greeting extends React.Component {
render() {
  return <h1>Hello, {this.props.name}</h1>;
}
}

📥 3. Props

  • Read-only values passed to components.
  • Encourages reusability.

  • Props are immutable — changes should be done through state in the parent.

<Greeting name="John" />

🧠 4. State

  • Holds dynamic data.

  • Modifying state re-renders the component.

const [count, setCount] = useState(0);

  • Never mutate state directly. Always use setters:

    ❌ count++
    ✅ setCount(count + 1)

🪝 5. Hooks (Functional Lifecycle + Logic)

🔗 What is a Hook?

  • A Hook is a JavaScript function that lets you “hook into” React features from functional components.
  • Hooks cannot be used in class components.
  • Always start with use (e.g. useState, useEffect).
  • Must be called at the top level of the component (not inside loops, conditions, or nested functions).

🧰 Rules of Hooks

  1. Only call Hooks at the top level.
  2. Only call Hooks from React functional components or custom hooks.
  3. Custom hooks must start with use.

📚 Built-in Hooks

  • ✅ Purpose: Manage local component state.

    📦 Syntax:

    🧪 Example:

    📌 Notes:

1️⃣ useState → State Handling in Functional Components

const [state, setState] = useState(initialValue);
const [count, setCount] = useState(0);
  • Re-renders the component on state update.
  • Always use the setter — never mutate the state directly.

  • ✅ Purpose: Run side effects like data fetching, DOM manipulation, etc.

    📦 Syntax:

    🧪 Example:

    📌 Notes:

2️⃣ useEffect → Side Effects / Lifecycle

useEffect(() => {
// effect
return () => {
  // cleanup (optional)
};
}, [dependencies]);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
  • [] dependency = runs once (on mount).
  • No dependency = runs on every render.
  • Returns cleanup function that runs on unmount or before re-run.

  • ✅ Purpose: Access values from a React Context Provider.

    📦 Syntax:

    🧪 Example:

    📌 Notes:

3️⃣ useContext → Access Context API

const value = useContext(MyContext);
const theme = useContext(ThemeContext);
  • Helps avoid prop drilling.
  • Triggers re-render if context value changes.

  • ✅ Purpose: Create a persistent mutable reference.

    📦 Syntax:

    🧪 Example:

    📌 Notes:

4️⃣ useRef → DOM Access / Persistent Values

const ref = useRef(initialValue);
const inputRef = useRef(null);
 
useEffect(() => {
inputRef.current.focus();
}, []);
  • Changes to .current do not trigger re-renders.
  • Often used to store DOM references or timers.

  • ✅ Purpose: Handle complex state transitions or multiple state values.

    📦 Syntax:

    🧪 Example:

    📌 Notes:

5️⃣ useReducer → Complex State Logic (Redux-like)

const [state, dispatch] = useReducer(reducerFn, initialState);
const reducer = (state, action) => {
switch (action.type) {
  case "increment":
    return { count: state.count + 1 };
  default:
    return state;
}
};
 
const [state, dispatch] = useReducer(reducer, { count: 0 });
  • Ideal for managing multiple related state updates.

  • ✅ Purpose: Prevent re-creating functions unnecessarily on every render.

    📦 Syntax:

    🧪 Example:

    📌 Notes:

6️⃣ useCallback → Memoize Functions

const memoFn = useCallback(() => {
// logic
}, [dependencies]);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
  • Useful when passing callbacks to child components to avoid re-renders.

  • ✅ Purpose: Cache the result of expensive operations.

    📦 Syntax:

    🧪 Example:

    📌 Notes:

7️⃣ useMemo → Memoize Expensive Computation

const memoizedValue = useMemo(() => computeExpensive(value), [value]);
const total = useMemo(() => calculateTotal(items), [items]);
  • Only recomputes when dependencies change.

  • ✅ Purpose: Allow parents to call methods on child components via ref.

    📦 Syntax:

    📌 Notes:

8️⃣ useImperativeHandle → Expose Custom Methods to Parent

useImperativeHandle(ref, () => ({
customMethod() {}
}));
  • Must be used with forwardRef.

  • ✅ Purpose: Similar to useEffect, but runs synchronously before paint.

    📌 Notes:

9️⃣ useLayoutEffect → Run Effect Before Paint

  • Use when you need to measure layout or update styles before screen paint.
  • Use sparingly; can block visual rendering.

  • ✅ Purpose: Enhance visibility of custom hook values in React DevTools.

    📦 Syntax:

🔟 useDebugValue → Show Custom Hook Info in DevTools

useDebugValue(value);

  • Encapsulate and reuse logic across components.

    🧪 Example:

    📌 Notes:

🛠️ Custom Hooks

function useToggle(initial = false) {
const [value, setValue] = useState(initial);
const toggle = () => setValue(v => !v);
return [value, toggle];
}
  • Must start with use.
  • Keeps components clean and DRY.

🧠 Hook Comparison Table

HookPurposeEquivalent (Class Component)
useStateManage local statethis.state, setState()
useEffectSide effects (API, DOM, timers)componentDidMount, etc.
useContextAccess context valuecontextType
useRefPersist values / DOM refscreateRef
useReducerComplex state logicRedux pattern
useCallbackMemoize functionsshouldComponentUpdate
useMemoMemoize valuesshouldComponentUpdate
useImperativeHandleExpose methods via refClass method with ref
useLayoutEffectSync effect before DOM paintSync version of componentDidMount
useDebugValueDebug custom hook info—

✅ Best Practices with Hooks

  • Keep Hooks at the top of your component.
  • Avoid using Hooks conditionally.
  • Clean up side effects properly using return in useEffect.
  • Prefer useReducer for complex or nested state.
  • Extract custom logic to custom hooks.
  • Avoid over-using useMemo / useCallback — only use when needed.

🧰 Libs & Framework

🔗 Official Docs & Tools

📦 Popular Libraries (React Ecosystem)

🧩 Frameworks Built on React

Graph View

Recently Updated