React Unpacked -A Quick Guide to Essential Concepts

4 min readAug 29, 2024

React is a powerful and popular JavaScript library for building user interfaces, particularly single-page applications where dynamic content is key. Developed and maintained by Facebook. React allows developers to create large web applications that can update and render efficiently with minimal effort.

In this guide, I’ll explore the fundamental concepts of React that are essential for developers to understand.

We’ll cover the following key topics:

🖊 Components :

Functional Components: Stateless components are defined as JavaScript functions.
Class Components: Components are defined as ES6 classes, allowing for state and lifecycle methods.
JSX: Syntax extension for JavaScript, allowing the embedding of HTML-like syntax within JavaScript code to define React elements.

🖊 Props and State :

Props (Properties): Data passed to a component from its parent, immutable within the component.
State: Data managed within a component, mutable and triggers Ul updates when changed using setState().

🖊 Lifecycle Methods:

Mounting Lifecycle

These methods are invoked when a component is being created and inserted into the DOM:

render(): Renders the component's UI.
componentDidMount(): Called once the component is mounted, typically used for initiating network requests or DOM manipulations.

Updating Lifecycle

These methods are invoked when a component’s state or props change, causing a re-render:

shouldComponentUpdate(nextProps, nextState): Determines if the component should re-render. Return true to proceed with re-rendering or false to skip it.
render(): Renders the updated UI.
componentDidUpdate(prevProps, prevState): Called after the component has re-rendered, useful for performing operations based on changes.

Unmounting Lifecycle

This method is invoked when a component is being removed from the DOM:

componentWillUnmount(): Used for cleanup tasks, such as invalidating timers or canceling network requests.

🖊 React Hooks :

Hooks were added to React in version 16.8.

Hooks allow function components to have access to state and other React features.

Here are some common hooks:

use state: Hook for adding state to functional Components

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

2. useEffect: Hook for handling side effects in functional components (e.g.,data fetching, subscriptions).

useEffect(() => {
}, [dependencies]);

3. useContext: Hook for accessing context in functional components.

const value = useContext(MyContext);

4. useReducer: Hook for managing state transitions with actions in functional components.

const [state, dispatch] = useReducer(reducer, initialState);

5. useMemo: Memoizes expensive calculations so they are only recomputed when their dependencies change, improving performance.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

6. useCallback: Memoizes callback functions to prevent unnecessary re-creations, especially useful for passing callbacks to child components.

const handleClick = useCallback(() => {
}, [dependencies]);

In React 18, several new hooks and updates enhance the functionality and performance of functional components.

userId: Provides a unique ID that is stable across server and client renders.

const id = useId();

useSyncExternalStore: Allows components to subscribe to external stores and keeps them in sync with React's rendering.

const state = useSyncExternalStore(subscribe, getSnapshot);

useTransition: Provides a way to manage transitions.

const [isPending, startTransition] = useTransition();

useDeferredValue: Defers updates to a value, allowing you to render lower-priority updates at a more convenient time to avoid blocking the UI.

const deferredValue = useDeferredValue(value);

🖊 JSX Elements :

HTML Elements: HTML-like elements representing the Ul structure.
React Components: Custom components defined by developers.
Expressions: JavaScript expressions enclosed in curly braces {} for dynamic content rendering.

🖊 Event Handling:

onClick, onChange, onSubmit, etc.: Event handlers for handling user interactions.
Synthetic Events: Cross-browser wrapper for native events, providing consistent event handling.

🖊 Conditional Rendering :

Conditional Statements: if statements or ternary operators for conditional rendering.
Logical && Operator: Conditional rendering based on a logical condition.

🖊 Lists and Keys :

Lists: Rendering arrays of data as a list of elements using map() function.
Keys: Unique identifiers for list items, aiding React in efficient re-rendering.

🖊 Forms :

Controlled Components: Form inputs whose value is controlled by the React state.
Uncontrolled Components: Form inputs that maintain their own state.

🖊 Context :

React Context: Mechanism for passing data through the component tree without manually passing props at every level.

🖊 Fragments :

React Fragments: Wrapper for groupingmultiple elements without adding extra nodesto the DOM.

🖊 Error Boundaries :

Error Boundary: A component that catches JavaScript errors in its child component subtree.

🖊 High-Level Concepts :

Virtual DOM: React’s abstraction of the browser’s DOM, enabling efficient updates.
Reconciliation: Process of updating the DOM to match React’s virtual DOM representation.
Component Composition: Building Uls by combining smaller, reusable components.
One-Way Data Flow: Data flows down the component hierarchy, simplifying state management.

🖊 Additional Concepts :

Hooks Customization: Writing custom hooks for reusing stateful logic.
Code Splitting: Splitting the code into smaller chunks for better performance.
Server-Side Rendering (SSR): Rendering React components on the server side before sending them to the client.
Static Type Checking: Using tools like PropTypes or TypeScript for static type checking.
State Management Libraries: Integration with state management libraries like Redux or MobX for managing complex application state.

Thus, These are the basic concepts of React that I’ve observed. I hope this guide has helped you to understand the fundamentals.

Thanks for reading, and Happy coding! 😇💻