LAVENDER LYNX

CONTENT
REACT HOOKS: USESTATE & USEEFFECT

COMPONENT LIFE CYCLE

ROUTING WITH REACT ROUTER

MANAGING COMPLEX STATE WITH REDUX OR CONTEXT API

 REACT HOOKS
React Hooks are tools in React that let you
add extra abilities to your components
without using classes. They allow you to
use React’s features in simpler ways,
especially when you want to handle things
like data that changes, or effects that
happen at certain times. Hooks help make
your code cleaner and easier to
understand.
 HOOKS RULES:
There are 3 rules for hooks:
Hooks can only be called inside React function components.
Hooks can only be called at the top level of a component.
Hooks cannot be conditional
This Hook lets you add a "state" to
your component. "State" is just a way
to keep track of data that can change.
For example, you can use useState to
remember if a button has been
clicked or what text a user typed.
This Hook lets you run code at
certain times, like when a component
first appears on the screen or when
some data changes. It’s like setting
up instructions for when and how
things should happen.
HOW TO SET UP YOUR REACT PROJECT

On your terminal and type...

npx create-react-app (filename)

Note:
You can’t use capital letters in naming
your file.

Note:
Wait while its installing (it may take a
few minutes).
HOW TO SET UP YOUR REACT PROJECT

To run the project type cd (filename) then npm start

To edit the website, navigate to the src folder and open

App.js. This file serves as the main function of the
website.
You can also add additional JavaScript files if you want.
Do whatever you want, whatever makes you happy.
COMPONENT LIFE
CYCLE
DEFINITION
The lifecycle of a React component describes the
sequence of events and methods from its creation to
its destruction.
IMPORTANCE IN DEVELOPMENT
It helps developers manage component behavior and data flow.
Allows optimization of rendering, data fetching, and resource
management.
THREE MAIN PHASES
MOUNTING
When the component is first created and added to the
screen.
UPDATING
When the component changes or updates based on user actions.
UNMOUNTING
When the component is removed from the screen.
MOUNTING PHASE
What Happens?
The component is created and added to
the screen.
Methods Used:
constructor(): Initializes the component
and its initial state.

componentDidMount(): Runs after the

component is added to the screen,
good for loading data.
 UPDATING PHASE
What Happens?
The component is created and added to the screen.
Methods Used:
render(): Re-renders the UI.
componentDidUpdate(): Invoked after re-render, often used for data
updates or DOM manipulation.
 UNMOUNTING
PHASE
What Happens?
The component is removed from the screen.

Method Used:
componentWillUnmount(): Used for cleanup,
like stopping timers or removing listeners.
MOUNTING PHASE
UPDATING PHASE
UNMOUNTING PHASE
WHAT IS ROUTING?
a mechanism that determines how an application responds to a
client request for a specific endpoint, which is a path in the URL.
Routing allows developers to map URLs to specific resources,
functions, or components, making it crucial for navigating and
organizing a web application’s content.

WHAT IS REACT ROUTER?

a standard library for routing in React applications. It enables
developers to build single-page applications (SPAs) that allow for
seamless navigation and dynamic content updates without the need
to reload the entire page.
ROUTING WITH
REACT ROUTER
a technique for creating navigation within a
single-page React application, allowing users to
switch between different views or "pages" without
reloading the entire website. React Router is a
popular library that helps developers manage
routes in React applications, making it possible to
build complex user interfaces with smooth
navigation.
ROUTER COMPONENT
BROWSER-ROUTER
Often used for web apps. It uses the HTML5 history API
to keep the UI in sync with the URL, making navigation
feel smooth.

HASH-ROUTER
Useful when deploying on static file hosts that don’t
support client-side routing. It uses the hash portion of
the URL (e.g., /about becomes /#/about).
ROUTES AND ROUTE COMPONENT

ROUTE
Defines individual paths or “routes” in the application
and specifies which component to render for each route.

ROUTES
Wraps multiple Route components and helps to define
the main route structure. This helps the app know which
component to render based on the URL.
LINK COMPONENT
Link and NavLink are used to navigate between routes
without reloading the page. Unlike traditional anchor
tags, they prevent a full page reload, making transitions
faster.

NESTED ROUTING
React Router also supports nested routes, allowing you
to organize components hierarchically and render
subcomponents based on the parent route.
DYNAMIC ROUTING
Dynamic parameters allow you to create routes that
capture parts of the URL as variables, like /user/:id, which
can render a different component based on the id
provided.

NAVIGATE COMPONENT
For programmatic navigation, React Router provides a
Navigate component and the useNavigate hook, which
help redirect users to different routes based on certain
conditions.
ADVANTAGES OF USING
REACT ROUTER
Enables smooth transitions and a more
responsive user experience.
Helps organize the application into
meaningful, navigable components.
Great for handling complex app flows and
allows for nested and dynamic routes.
 MANAGING COMPLEX
STATE WITH REDUX OR
CONTEXT API
What is State Management?
State management refers to the process of managing the state of an application. The state is a piece of an object that holds the data
that can change over time and affect the looks(rendering) and behavior of the application.

State Management in React

React offers several options for managing state in dynamic web apps. You can use the useState hook for local state within a component,
the Context API for shared state across components, and external libraries like Redux for more complex state management.

Why do we need state management solutions?

State management is essential for avoiding prop drilling and simplifying data sharing between components, making the app more
maintainable and predictable.

Importance of Choosing the Right State Management Solution

Choosing the right state management solution is crucial for the scalability, maintainability, and performance of the application.
 MANAGING COMPLEX
STATE WITH REDUX OR
CONTEXT API
Context API

What is the Context API?

The Context API in React enables you to share data across multiple components without manually passing props down
through each level of the component tree.

When to Use Context API

The Context API is best suited for scenarios where you need to share state across a small to medium-sized application
(sometimes in more complex scenarios as well). It is more suitable for storing pieces of data like themes, localization,
authentication state etc. that doesn’t change frequently.
 MANAGING COMPLEX
STATE WITH REDUX OR
CONTEXT API
Advantages & Disadvantages of Context API

Advantages:
Easy to implement and use
Already built into React
Simple syntax with less boilerplate

Disadvantages:
It can lead to performance issues if not used correctly
Not ideal for managing complex states like analytics, user data etc.
 MANAGING COMPLEX
STATE WITH REDUX OR
CONTEXT API
OUTPUT
 MANAGING COMPLEX
STATE WITH REDUX OR
CONTEXT API
Redux

What is Redux?
Redux is an open-source JavaScript library for managing and centralizing application state. It is one of the, if not the most popular
library for managing complex state in React applications of all sizes.

Core Concepts of Redux

Store: An object stored at a central location where the state of the application is kept.
Actions: Actions are plain JavaScript object that contains information (called payload).
Reducers: Pure JavaScript functions that take the current state and an action and return a new object that is then stored.
Dispatch: A function used to send actions to the store so that it can update the state accordingly.
Immutability: The store object in Redux is never updated, it is only ever replaced by a new state object.
 MANAGING COMPLEX
STATE WITH REDUX OR
CONTEXT API
When to Use Redux
Redux is ideal for medium to large applications with complex state management needs. It excels in scenarios with frequent state
changes, data fetching, and when multiple components need to share data both horizontally (across siblings) and vertically (between
parents and children).
Advantages & Disadvantages of Redux
Advantages:
Predictable state management
Makes sharing the same data across multiple components a hassle free task once implemented
Easier debugging with time-travel capabilities
Largest ecosystem of supported plugins and community support
Disadvantages:
Harder to grasp concepts when initially getting started
More boilerplate code, hence can be an overkill for simple application
Wrong configurations and handling can lead to hard to fix performance issues
 MANAGING COMPLEX
STATE WITH REDUX OR
CONTEXT API

Output Sequence in console

Initial State: { isAuthenticated: false }

Current Authentication State: { isAuthenticated: true }
After Login: { isAuthenticated: true }
Current Authentication State: { isAuthenticated: false }
After Logout: { isAuthenticated: false }
THANK YOU