Scribd
Upload
91 views31 pages

MODULE - React Hook

React Hooks allow React components to use state and other React features without writing classes. They enable stateful logic to be extracted from components so it can be tested and reused independently. Some key React Hooks include useState for managing local state, useEffect for handling side effects, and useContext for accessing context. Custom Hooks can be built to share logic between components without changing their structure. Context provides a way to share values like locale and theme globally across components without passing props through every level.

Uploaded by

Sehun Oh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
91 views31 pages

MODULE - React Hook

React Hooks allow React components to use state and other React features without writing classes. They enable stateful logic to be extracted from components so it can be tested and reused independently. Some key React Hooks include useState for managing local state, useEffect for handling side effects, and useContext for accessing context. Custom Hooks can be built to share logic between components without changing their structure. Context provides a way to share values like locale and theme globally across components without passing props through every level.

Uploaded by

Sehun Oh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

FRONT END DEVELOPER

Dodi Qory Utama, Andika Pradana Arif


Modul : React Hook
Module Overview (topics, learning
activities)
Topics
• Implement React Hook
Module Objectives
• Understand how to using react hook
• Understand how to handle data from network
Background Problems

• It’s hard to reuse stateful logic between


components
• Complex components become hard to
understand
• Classes confuse both people and machines

Note : you can watch this,


https://www.youtube.com/watch?v=oytL881p-nQ
React Hooks

“simplicity is prerequisite for reliability” -


 Edsger W. Dijkstra
React Hooks

• With React hooks we can easily isolate state management in


React Component.
• We don’t need complicated abstraction like classes, all we
need just a simple function.
• We can reuse our component easily.
Effect Hooks

How do we trigger a component to update the


data without using class?
Effect Hooks
• We’ve likely performed data fetching, subscriptions, or manually
changing the DOM from React components before. We call these
operations “side effects” (or “effects” for short) because they can
affect other components and can’t be done during rendering.

• The Effect Hook, useEffect, adds the ability to perform side


effects from a function component. It serves the same purpose as
componentDidMount, componentDidUpdate, and
componentWillUnmount in React classes, but unified into a single
API.
Rule of Hooks
Hooks are JavaScript functions, but they impose two additional
rules:
• Only call Hooks at the top level. Don’t call Hooks inside
loops, conditions, or nested functions.
• Only call Hooks from React function components. Don’t
call Hooks from regular JavaScript functions. (There is just
one other valid place to call Hooks — your own custom
Hooks. We’ll learn about them in a moment.)
Code example
Without Hooks
Do you find any difference?
• Font size is smaller in the last one
• Has more code

• Repeating code
• You have to understand “this” concept in javascript
Another example
Another example
Which one
• More Readable?
• More Intuitive?
• Easier to maintain?
• Less Bug?
Optimizing Performance
• we don’t need to subscribe every action. We can optimizing
performance by Skipping Effects.

• We can tell React to skip applying an effect if certain values haven’t


changed between re-renders. To do so, pass an array as an optional
second argument to useEffect:
Conditionally firing an effect
• The default behavior for effects is to fire the effect after
every completed render. That way an effect is always
recreated if one of its dependencies changes.
Custom Hooks

• With Hooks we can share and reuse component


without easily because we isolate the lifecycle and the
state in the component.
• But how do we can only we share lifecycle function
without any component ?
Wrapper Hell
Custom Hooks
• Custom Hooks offer the flexibility of sharing logic that
wasn’t possible in React components before.
• You can write custom Hooks that cover a wide range of
use cases like form handling, animation, declarative
subscriptions, timers, and probably many more we
haven’t considered.
• What’s more, you can build Hooks that are just as easy
to use as React’s built-in features.
Custom Hooks
Custom Hooks
Context
• In a typical React application, data is passed top-down (parent to
child) via props, but this can be cumbersome for certain types of
props (e.g. locale preference, UI theme) that are required by many
components within an application.
• Context provides a way to share values like these between
components without having to explicitly pass a prop through every
level of the tree.
When to Use Context
• Context is designed to share data that can be considered “global”
for a tree of React components, such as the current authenticated
user, theme, or preferred language.
• Context is primarily used when some data needs to be accessible
by many components at different nesting levels. Apply it sparingly
because it makes component reuse more difficult.

• If you only want to avoid passing some props through many


levels, component composition is often a simpler solution
than context.
Context
Context
useContext
• Accepts a context object (the value returned from React.createContext)
and returns the current context value for that context.
• The current context value is determined by the value prop of the
nearest <MyContext.Provider> above the calling component in the tree
Hooks API Reference
• Basic Hooks
• useState
• useEffect
• useContext
• Additional Hooks
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue
Exam/Assessment/Assignment
• Find the explanation of every single reason why do we need separate
frontend and backend in web development.
References/Additional Resources
• https://en.wikipedia.org/wiki/Web_framework
• https://reactjs.org/
• https://vuejs.org/
• https://angular.io/

You might also like