2022-08-15
4250
#react
Ohans Emmanuel
356
Aug 15, 2022 â‹… 15 min read

How to refactor React components to use Hooks

Ohans Emmanuel Visit me at ohansemmanuel.com to learn more about what I do!

Recent posts:

Modern CSS Carousels: No JavaScript Required

Modern CSS carousels: No JavaScript required

This article walks through new CSS features like ::scroll-button() and ::scroll-marker() that make it possible to build fully functional CSS-only carousels.

Saleh Mubashar
Jun 6, 2025 â‹… 5 min read
hidden coast of developer elitism

It’s time to break the cycle of developer elitism

Let’s talk about one of the greatest problems in software development: nascent developers bouncing off grouchy superiors into the arms of AI.

Lewis Cianci
Jun 4, 2025 â‹… 9 min read
When To Use Flexbox And When To Use CSS Grid

When to use Flexbox and when to use CSS Grid

Flexbox and Grid are the heart of modern CSS layouts. Learn when to use each and how they help build flexible, responsive web designs — no more hacks or guesswork.

Leonardo Maldonado
Jun 3, 2025 â‹… 9 min read
CSS Breakpoints For Responsive Design

Using CSS breakpoints for fluid, future-proof layouts

Responsive design is evolving. This guide covers media queries, container queries, and fluid design techniques to help your layouts adapt naturally to any screen size.

Rob O'Leary
Jun 3, 2025 â‹… 13 min read
View all posts

4 Replies to "How to refactor React components to use Hooks"

  1. This is the best article that explains well the different react hooks for me. Thanks a lot for this! Btw, do you recommend to omit react-redux over react hooks? Sorry about my grammar.

  2. Hello, thank you for this thorough article. I do have a question about the second example involving the class component with proptypes. I was wondering how/why the refactored code resulted in this:

    App.propTypes = {
    name: PropTypes.number
    }

    Particularly, it is the “PropTypes.number” part of it I don’t understand. Because it first appears as:

    static propTypes = {
    name: PropTypes.string
    }

    Any clarification would be greatly appreciated. Thank you.

Leave a Reply