📜 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()

• Note: Hooks replace lifecycle methods in functional components.

🏗️ 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)

• Introduced in React 16.8, Hooks allow functional components to manage state, access lifecycle methods, and handle side effects, making class components mostly unnecessary.

🪝 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

✅ 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

• React Official Website:
  https://react.dev (new docs)
• React GitHub Repo:
  https://github.com/facebook/react

📦 Popular Libraries (React Ecosystem)

• React Router – Declarative routing for React apps.
  🔗 https://reactrouter.com
• Redux Toolkit – Predictable state management.
  🔗 https://redux-toolkit.js.org
• React Query – Data-fetching and caching for server-state.
  🔗 https://tanstack.com/query/latest
• Formik – For building forms in React.
  🔗 https://formik.org
• Yup – Schema validation (commonly used with Formik).
  🔗 https://github.com/jquense/yup
• Zustand – Lightweight state management alternative.
  🔗 https://zustand-demo.pmnd.rs
• Jotai / Recoil – Minimalistic and experimental state libraries.
  🔗 https://jotai.org
  🔗 https://recoiljs.org

🧩 Frameworks Built on React

• Next.js – Full-stack React framework with SSR, API routes, and more.
  🔗 https://nextjs.org
• Gatsby – Static site generator for React.
  🔗 https://www.gatsbyjs.com
• Remix – Full-stack React framework with focus on performance & data loading.
  🔗 https://remix.run