React | Advanced Problems & Solutions 😉

Shahzaib Khalid

These slides are available at (https://www.shahzaibkhalid.com/react-advanced-issues-and-solutions)

Stop! 🛑

This is not an introduction to React! 😶

You must have an idea about:

  • Props
  • State
  • Lifecycle Methods

Who am I? 😁

Shahzaib's Avatar

A front-end developer 👨🏻‍💻 mainly interested in JavaScript & React. ⚛︎

@shahzaibkhalid | shahzaibkhalid.com

React is Winning! 🎉

npm trends about top JS frameworks

But...

There are some pain-points! 😭

What this talk is about

  • Issues with classes in React 😢
  • How does React Hooks solve problems with classes? 🤔
  • Pain of sharing code among components using HOC & Render Props 😒
  • How does React Hooks simplify code sharing among components? 🤔

Issues with classes in React

Let's dive in! 👉
Class Component
Functional Component

We need to use classes to use state and lifecycle methods

Problem: 01

Classes has annoying behavior when it comes to "this" 😢

Problem: 02

Related logic is split across Lifecycle methods 😐

Logic split across component
Problem: 03

You're not sure when you'd be converting functional component to class 🤔

Problem: 04

Classes are hard to minify and tree-shake 😶

Classes are hard to minify and tree-shake
Problem: 05

Classes makes it difficult to hot-reload your code 😟

How we can solve these problems with Classes? 🤔

By avoiding the Classes! Simple. 😅

React Hooks 🎉

Use State and Lifecycle, straight from simple JavaScript functions!

Hook: 01

useState

It let us hook state into functional components! 😉

Let's compare Classes with Hooks 🔥

Class Component
Functional Component

But, what to do if I've a state object, instead of a single value?

Hook: 02

useReducer

Inspired by Redux, it let us hook state object into functional component! 😉

Let's compare Classes vs Hooks for useReducer!

Hook: 03

useRef

Built-in React Hook to access any JSX Element 🖖

Already covered! 😎

There are many more built-in Hooks! 🙏

But for now, let's discuss problem other than Classes

Sharing stateful logic among React Components 😶

Sharing stateful logic and sharing code are two different things. ☘️

How?

Code sharing is different

Let's understand through an example that what's the meaning of sharing stateful logic?

Content Normal
Sidebar Normal

HOC (Higher Order Component) 🤟🏼

withJoke HOC
Content HOC
Sidebar HOC

But, HOCs can lead us to "Wrapper Hell" 👀

HOC Hell

Render Props to Rescue 🚑

Render Prop Joke
Content Render Prop
Sidebar Render Prop

Multiple Render-Props can lead us to "massive nesting" 😶

Render Prop Nesting

(Credits: Nick Gard - Why I Don't Use Render Props in React on Medium)

Custom Hooks 🎉

Custom useJoke Hook
Custom Hook Content
Custom Hook Sidebar

Custom Hooks are the most exciting features of Hooks! 😉

No nesting & wrapper hell!

Rules of Hooks!

  • Only Call Hooks at the Top Level
  • Custom Hooks names should always start with use

  • Don’t call Hooks from regular JavaScript functions. Instead, you can:

    • Call Hooks from React function components.
    • Call Hooks from custom Hooks

And there are many more Hooks to checkout!

Like, useDarkMode & useMemo 😎

These slides are built with React too. 😎

Checkout the source code at: @shahzaibkhalid/react-advanced-issues-and-solutions