Hooks are functions that allow you to "hook into" React state and lifecycle features from function components. There are three main rules for using hooks: only call them at the top level, only from React functions, and you can call them from custom hooks. Hooks help solve issues with class components by allowing stateful logic to be reused without changing component hierarchy and making complex components easier to understand and test. While hooks provide benefits, there is no need to immediately use them everywhere and classes will continue to be supported.

1. 🙋 An introduction.
< MSK Tutorials />
React hooks
Manoj Satish Kumar
Web developer Tutorials
MSK
Episode #1

2. < MSK Tutorials />
The bar for adding a new primitive
to React is extremely high.
😲

3. What are hooks ?
• Hooks are functions that let you
“hook into” React state and lifecycle
features from function components.
• Hooks don’t work inside classes — they
let you use React without classes.
• Hooks will reduce your component size
significantly and have many other
benefits.
🤔
They are created for a reason. A big reason.
< MSK Tutorials />

4. 3 rules of using hooks.
• 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.
😇
Because rules are meant to be followed. Not broken.
< MSK Tutorials />

5. < MSK Tutorials />
Feeling lazy to remember these
rules while coding ?
👨💻
Install eslint-plugin-react-hooks npm package to
enforce the rules in your project.
😪
😉

6. React hooks
When
upgrading to
React 16.8,
don't forget to
update React
DOM
Don’t worry.
Classes will not be
removed from React
No breaking changes.
100% backward compatible
Not compulsory.
Hooks are "opt-in" - you can use
hooks in few components in your app
No more classes.
Hooks allow you to use state and other features of react
without the need of using class components. Hooks
embrace functions
Facebook
has no plans
to
completely
rewrite all
components
with hooks
Hooks solve
the problems
present in
class
components
Same internals.
Hooks provide "Direct
APIs" to the React
concepts you already
know - props, state,
context, refs, and lifecycle
Hooks got introduced in
React v16.8
😲
Hold on.
🤯

7. < MSK Tutorials />
Problems associated with
Class components
🤯

8. It’s hard to reuse stateful logic between components.
• Patterns like render-props and higher-
order-components tried to give us a way to
"attach" reusable behaviour to a component
( like connecting it to a store). But you need
to re-structure your components before
using them.
• You will find wrapper-hell in React DevTools
( providers, consumers, higher-order
components, render props, and other
abstractions )
😡
👎
👎
Problem #1
< MSK Tutorials />

9. Solution
• Hooks let you extract stateful logic from
a component so it can be tested
independently and reused.
• Hooks allow you to reuse stateful logic
without changing your component
hierarchy.
😍
👍
👍
Hooks take reusability to the next level.
< MSK Tutorials />

10. Problem #2
Complex components become hard to understand.
• Life-cycle methods can contain code of unrelated
logic ( ex., Component will perform data-fetching in
componentDidMount but it may also contain
unrelated logic that sets up event listeners )
• It is difficult to break these components into smaller
ones because stateful logic is all over the place.
• It becomes difficult to test these components. So
people abstract the state with 3rd party libraries.
• 3rd party libraries introduce too much abstraction
and increases number of files.
🤬
👎
👎
< MSK Tutorials />
👎
👎

11. Solution
• Hooks let you split a big component into
smaller functions with related pieces.
• Hooks provide internal state to react
component. So testing becomes easy.
• 3rd party state management libraries
can be avoided for smaller use cases.
🥳
👍
👍
Hooks enable better organisation of code.
< MSK Tutorials />
👍

12. Problem #3
Classes confuse both people and machines.
• You have to understand how this works in
JavaScript. Which is confusing to many. Till today.
• You have to remember to bind the event handlers.
You will forget it for sure.
• When to use class vs when to use functions lead to
disagreements even between experienced react
developers.
• Classes don’t minify very well, and they make hot
reloading flaky and unreliable.
🥴
👎
👎
< MSK Tutorials />
👎
👎

13. Solution
• Function components are easier to
understand than classes.
• No need to bind event handlers
explicitly.
• You don’t have to deal with this too
much. Code becomes more readable.
🤩
👍
👍
Hooks embrace function components.
< MSK Tutorials />
👍

14. Adoption
Don’t start
using hooks in
all your projects
in production
immediately.
Take it easy.
Classes are here to stay
and support prod code.
Co existence.
Hooks and classes can live
together in a project.
Chillax.
There is no rush to migrate to Hooks.
One step at a time.
it’s best to use Hooks in new and non-critical components
first, and ensure that everybody on your team feels
comfortable with them.
Facebook
has tens of
thousands of
components
written in
classes.
Once you
get hooked,
there is no
going back !
Time to think differently.
It takes a bit of a mind shift
for developers to start
“thinking in Hooks”.
So take your time.
Hooks are completely
"opt-in"
😪
Hold on.
❤
Strategy
😃

15. Manoj Satish Kumar
Web developer
I believe knowledge is useless
if not shared. Let’s learn together.
I’m with you. It’s our journey.
“Follow me
on LinkedIn

16. TUTORIALS
MSK
< MSK Tutorials />