react-hooks.md

react-hooks

Let's learn about React Hooks via these 55 free blog posts. They are ordered by HackerNoon reader engagement data. Visit the /Learn or LearnRepo.com to find the most read blog posts about any technology.

React Hooks are functions that let you 'hook into' React state and lifecycle features from function components. They simplify state management and side effects, making component logic more reusable and easier to test within React applications.

1. Cleanup Functions in React’s UseEffect Hook — Explained with examples

Cleanup functions in React’s useEffect hook allow us to stop side effects that no longer need to be executed in the component.

2. How to use componentWillMount with Functional Components in React

Functional components are far more efficient than class based components. Less code is needed to be written to achieve the same goal.

3. Storing and Retrieving Data in Next.js Using LocalStorage and TypeScript

Want to persist data in Next.js without using a lib or any third parties to achieve that, and still have the data not change or reset after refresh?

4. What's The Right Way to Fetch Data in React Hooks? [A Deep Dive]

The React Hooks docs has a FAQ entry: “How can I do data fetching with Hooks?” where they link to this well written and detailed article by Robin Wieruch. There is however a shortcoming in that approach which affects correctness is some important situations.

5. React useRef, forwardRef and Some Problems you May Run Into Working With Them

What are useRef and forwarRef in react. When you should use them and when you should avoid using them. Problems, that could occur during useRef usage.

6. Creating a Terminal Emulator in React

How to create a terminal emulator in React and Typescript

7. How to Use a Hook in a Class Component

Did you know that you can use hooks in class components?

OK, I'm lying, kind of. You can't use a hook directly in a class component, but you can use a hook in

8. React useRef Hook Explained with Examples

Well, we all know that ref helps us to get access to the DOM. But let's consider next situation, we have some React component and we want to know how many times this component was rendered. How can we achieve that? Well, maybe we can use React useEffect and useState hooks to determine that the component was re-rendered. Something like this:

9. React 19: New Tools To Work With Forms

Discover how React 19's new hooks—useActionState, useFormStatus, and useOptimistic—simplify form handling with less boilerplate and cleaner code.

10. Migrating from useState to useReducer in React Hooks

useState is a simple hook for single state. useReducer is a powerful hook for complex state. Here's how to convert from useState to useReducer.

11. How to Lazy Load React Components with an Intersection Observer

Learn how to improve the performance of your application by lazy loading react components using the intersection observers

12. Advanced React Router V6 Techniques: Going Beyond the Basics

Learn advanced React Router techniques to elevate your routing abilities. Discover how to handle 404 pages, create an active page indicator, and utilize hooks.

13. You Might Not Need Controlled Components - A React Story

If you'll go to the official React website it says that the recommended way to use inputs is to control them via React state. It also mentions that in some cases you can go with an uncontrolled option but do not say what are these cases explicitly. Let’s try to dive into it and see the pros and cons of this approach.

14. Hooked on React Hooks — useState

Hooked on React Hooks — useStateSo what’s all the rage with React hooks? I’ve been exploring it for the past few months and lets just say I really believe that this is what React has needed to surmount its position as the top front end framework.

15. My Top 5 Best Practices for ReactJs

Howdy people, In this article we will be discussing the 5 best ReactJs practices that will help you simplify the building of great and high-performance ...

16. My Top 10 JavaScript Articles from 2019

JavaScript has come a long way since its humble beginnings as a clunky, exclusively front-end scripting language. We saw some big developments in the JavaScript landscape during 2019, including the widespread adoption of React hooks and functional programming concepts, steady conversion to TypeScript, and continued domination of React in the front-end framework ecosystem.

17. An Important Lesson About React Hooks

The react hooks are regular functions.

18. Higher Order Components (HoCs) in React

Higher Order Components are actually a design pattern derived from the compositional nature of React, which allows us to derive components...

19. Understanding React's useEffect Hook: A Deep Dive

Dive into the workings of React's useEffect Hook. Learn how to handle side effects in your functional components through real-world examples and use-cases

20. Creating a SPA that behaves as MPA with React

Take advantage of React virtual DOM and create a single page application that behaves as a multiple page application. React Router DOM is a great tool to make this possible; in this article, I will explain how to use it.

21. Implement Password Validation With Strength Meter From Scratch With React Hooks

Security is a priority when building apps and you want to let users know how strong their passwords are during sign up while giving good user experience.

22. The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

23. A Detailed Guide to the useEffect Hook in React

A complete guide for using React's useEffect hook

24. Infinite Scrolling vs Pagination: Making the Right Choice for React Apps

Though infinite scrolling & pagination offer viable options for handling large datasets in React applications, check here what suites you best.

25. How to Learn Enough React to be Dangerous

Most of React courses are outdated. Best up to date resources to learn React in 2021 NetNinja Codeevolution. Focus on Hooks and functional components

26. Guide to React Suspense: From Code Splitting to Data Fetching

Suspense is behind lazy component, it helps you to reduce boilerplate and optimize SSR. In this guide, we'll discover how it works and how to use it.

27. React App Configuration with TypeScript and Webpack

A step by step guide on how to create a React project from scratch, with TypeScript and Webpack.

28. Unravelling The Suspense About Render-As-You-Fetch In React

Render-as-you-fetch is the latest data fetching pattern in React. It leverages the React Suspense capabilities to provide a smooth developer & user experience.

29. A Beginner’s Guide to React Hooks and How to Use Them

Hooks are also useful because they allow you to split your code into smaller, reusable pieces, which can make it easier to manage and test.

30. Improve Your Application Performance With React Hooks

React Hooks are a powerful technique liked by many developers. They allow the use of React features like state managing or the use of lifecycle methods.

31. How to Optimize React Performace by Using useRef Hooks

And how we stopped our React Context re-rendering everything

32. Mastering Nested Routes for Robust Web Applications (Using React Router V6)

Unlock the power of React Router nested routes! Explore the fundamentals, React Router v6, and useOutletContext. Take your React apps to new heights.

33. Top 3 React Custom hooks in current project

Custom hooks are an amazing thing that happened with React. It brings to us the ability to create beautiful components and move a lot of business logic to hooks

34. Using Drizzle (Truffle) with React Hooks

Wondering how to implement Drizzle using React Hooks?

35. How to Create a Custom State Management Library With React Hooks and Context API

In this article, I will introduce the React Context API for state management and create a similar solution as Redux without using a third-party library.

36. How to Fetch Data from APIs Using useEffect React Hook

In this article, we will take a look at useEffect React hook to fetch data from an API. We will create a sample React application to pull data from the provider and use it in our application.

37. Master React by Designing Effective APIs With the useImperativeHandle Hook

The useImperativeHandle hook allows developers to customize the methods and properties exposed by a component, enhancing flexibility and maintainability.

38. How to Search and Filter Data Using React Hooks and a Headless CMS

Search and filter data using React Hooks and a headless CMS. Searching and filtering data is a common feature for websites and apps, especially e-commerce.

39. React Hooks Added in the Svix React Library

The Svix React library now ships with custom React Hooks to make building a custom Portal easier than ever.

40. 10 GitHub Repositories to Become a React Master

We've curated a list of ten outstanding GitHub repositories that will not only enhance your understanding of React but also empower you to become a React master

41. Introduction to React Hooks and Why They are the Wrong Abstraction

Before I get started, I'd like to express how grateful I am for all of the work that the React team has put in over the years. They've created an awesome framework that in many ways was my introduction to the modern web. They have paved the path for me to believe the ideas I'm about to present and I would not have arrived at these conclusions without their ingenuity.

42. Basic Hooks for Your TypeScript Project

5 essential TypeScript React hooks for modern, efficient, and maintainable front-end development.

43. How to Build a Video Call App with ZEGOCLOUD and React

In this blog post, I will show you how to create a video call app using ZEGOCLOUD and React. ZEGOCLOUD is a cloud-based video call platform.

44. Understanding the useContext Hook for Efficient State Management in React

Learn how to efficiently manage state in React applications using the useContext hook.

45. Mastering React Component Design for Reusable UI Components

Discover key React component design patterns to build reusable and scalable user interfaces.

46. What I learned from building a chat project with sockets.io and React

Well, after some I did some search on Google, I found an article with a developer who had the same issue. One and the awarded response was to use socket.

47. React Native - The Future of Mobile App Development

React Native gives you full freedom to choose the tools, architecture, and extensive libraries for developing a mobile app.

48. This Is Why React Team's useEffect Strategy Shines (CodePen Examples Inside)

Explore how the useEffect hook affects React performance. Learn why it runs after rendering and how it can optimize your app.

49. Building Forms in React Can Be a Piece of Cake 🧁

React hooks for forms state and validation, less code more performant.

50. Every Popular React Pattern You Should Know About

Learn the most effective React patterns — from HOCs and Render Props to Hooks, Compound Components, Suspense, and Server Components.

51. How to Enhance React Apps with useTransition Hook

The useTransition hook in React helps manage state updates with a focus on user experience.

52. Guide to Concurrency in React 18: How and Why

Guide to concurrency, CPU- and IO-bound components, and other interesting stuff. Finally, learn wtf deferred value is.

53. An Advanced Approach to Migrating From useState to useReducer

In this blog, we'll dive into a more complex example of how to manage state. Let's take a look at how we can make state management more scaleable.

54. React Hooks Are Powerful—But Here’s What They Won’t Fix

Hooks are powerful—but they won’t fix bad design, unclear logic, or rushed decisions.

55. Hooks Burnout: Why I Am Wishing for the Return of Class Components

Discover the challenges and frustrations of Hooks burnout in React development as a seasoned Front End Developer shares their concerns and seeks improvement.