Let's learn about via these 47 free stories. They are ordered by most time reading created on HackerNoon. Visit the to find the most read stories about any technology. React Hook /Learn Repo 1. I Created an Alternative to React's useEffect Hook Two custom hooks as an alternative for componentDidMount() and componentDidUpdate() React lifecycle method. 2. React Hooks 101: useState and useEffect React components are simply functions. Some are created with classes, better known as stateful and / or class components, and the others are created with functions only, also known as stateless and/or functional components. 3. How to Fetch API Data With RTK (Redux-Toolkit) Learn how to fetch data with Redux toolkit. 4. Fetch Data From an API in React.js Using React Hooks Create a web page that takes a city name as input and provides weather data about the city. 5. Building An Infinite Scroll Using React Hooks There are a lot of React pre-made components out there that promise infinite scroll functionality. The problem with that is that sometimes they are not tailored to fit your specific needs, especially if you are using the newly featured React-Hooks to create functional components all across your application. These pre-made components work well with class components, but they have not been updated to work with the state-of-the-art functional hook-components. 6. 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. 7. 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: 8. How to Build a Search Bar in React with React Hooks Below is a small gif of what we will be building. A simple search box that allows us search through a contact list. We would be using functional components rather than class based components to achieve this. 9. Create your React.js Address Autocomplete Component in 10 minutes ⏰ Hi guys, I want to introduce use-places-autocomplete. It's a React.js hook for Google Maps Places Autocomplete. With it you can build your own places autocomplete UI like the following demo easily! Hope you guys 👍🏻 it. 10. React Hook to Measure an Element's Size and Handle Responsive Components react-cool-dimensions is a React hook that measure an element's size and handle responsive components with highly-performant way, using ResizeObserver. Try it you will ❤️ it! 11. React Hooks In Depth Part #1: Introduction Note: This is the first article in a series of articles where we will cover React Hooks in Depth and try to understand their usage. 12. An Important Lesson About React Hooks The react hooks are regular functions. 13. More Features of the RTK Query Previously I wrote about RTK, this story will cover other details of its use. 14. 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. 15. Custom React Hook For Tracking Clicks Outside of the Component react-cool-onclickoutside is a React hook to trigger callback when user clicks outside of the target component(s) area. It's a useful logic for UI interaction design (IxD) like dismiss a dropdown menu, modal or tooltip etc. Help you guys ❤️ it. ⚡️ Live demo: https://react-cool-onclickoutside.netlify.app 16. Custom Hook in React for calling API — useApi What is a React custom hook and how to build one to fetch data 17. 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 18. 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. 19. Creating a Custom Hook for Fetching Asynchronus Data: useAsync Hook with Cache We can create a custom hook that will be used to handle all asynchronous data fetching and updating the state updating. 20. RTK for the useReducer Hook: A Guide So, in the basic scenario when there are no needs in the redux, I will only use the hook itself without heavy libraries just for the small feature. 21. 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. 22. How to Immediately Update Components Based on User Interaction with React/Redux How do you get the whole page to reload to show the updated data every time a user makes a change? 23. Tutorial: Building A Hangman Game With React Hooks In this tutorial, we’ll build an interactive hangman game using React hooks. Hangman is a classic game in which the player guesses a word one letter at a time. 24. 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... 25. Rethinking Components with React Hooks React Hooks have been around since React 16.8 and remain as popular and in demand as ever. They have introduced a completely new way of handling components in React, which may lead you to reevaluate your approach to coding on a fundamental level. Having already been established as the most beloved front-end framework according to Stackoverflow popularity polls, React went above and beyond with the introduction of Hooks. 26. 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. 27. React Hooks: Performance Pitfalls And How To Easily Avoid Them From version 16.8.0, React introduced us to a way to use state and other React features without writing a class — React Hooks. 28. 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. 29. 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. 30. How To Implement The Prefetch Pattern in React Concurrent Mode Recently, React announced a feature of the React ecosystem — Concurrent Mode. This would allow us to stop or delay the execution of components for the time that we need. It’ll help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed. 31. How to Optimize React Performace by Using useRef Hooks And how we stopped our React Context re-rendering everything 32. 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. 33. Creating a React Application to Solving Every Sudoku Puzzle Peter Norvig, the legendary Google mogul and AI titan, wrote a python essay to solve every Sudoku puzzle 10 years ago. Back then, he may not have expected that his code will inspire so many other posts and to be ported to so many different languages. For JavaScript, the latest version of the solver that I found was einaregilsson/sudoku from 2014 34. A Tutorial for Todo Apps using React, Redux and Framer-Motion React redux todo app tutorial : In this tutorial we will build Todo List app with  animations using Framer-motion. With react-redux we will use redux-toolkit. 35. Why Do You Love Frontend Development in ReactJS? [Writing Prompt] Here are some writing prompts on web development using React. 36. How To Create a Search Engine for Any Table Using a Custom React Hook I am going to show you guys how to make a basic search engine that would enable anyone to search for specific data in your table that you’ve built using any package or library in React. 37. My First React App, markView: An Interactive Markdown Previewer Here is mine documentation for markView: Interactive Markdown Previewer, my first React app. 38. How to Use Reactjs to Create a Twitter “What’s Happening” Bar Form Creating a Twitter What's Happening Bar Form in Reactjs including common actions such as: upload images, videos, gifs, and more. 39. React Hooks: The Difference Between useMemo and useCallback React library provides us two built-in hooks to optimize the performance of our app: useMemo & useCallback. At first glance, it might look like their usage is quite similar, so it can get confusing about when to use each. To clear that confusion, let’s dig in and understand the actual difference and the correct way to use them both. 40. Creating Highly-Performant Animations using Web Animations API and React hooks Using Web Animations API (a.k.a WAAPI) in the React hook way. Let's create highly-performant, flexible and manipulable web animations in the modern world. Hope you guys 👍🏻 it! 41. Filtering And Processing Data With useFilter Hook In React A React hook to filter large amount of data using  Web Worker. 42. ✨ How To Build Your UI Components with React Portals Super Easy Yo guys, I want to introduce react-cool-portal. It's a React.js hook for Portals. t helps you render children into a DOM node that exists outside the DOM hierarchy of the parent component. From now on you will never need to struggle with modals, dropdowns, tooltips etc. Check the features section out to learn more. Hope you guys 👍🏻 it. 43. Thrilled to be Recognized as the 2021 HackerNoon Contributor of the Year - React How does it feel to be a winner of Noonies 2021 as the React.js Contributor? Fantastic. Read how we intend to keep the title, our goals for 2022, and more. 44. React Native Animation Guide React Native Animation is an interesting topic56 where a dull application could be converted into an interactive and beautiful app. When you first login into an application, the thing which impresses us the most is interface and its interactivity. Working with animations could look a bit overwhelming at first but it is essentially a process of just 3 steps. 45. How to Take Full Advantage of useEffect in React Optimizing useEffect in React gives you a significant boost in performance and sometimes gets your code rid of nasty bugs. 46. The Boring React State Management Guide What is State? 47. Exploring Render Props Vs. React Hooks In 2020 Who said render props are obsolete? The good old pattern is still valid for the common use case where hooks may not always be the right choice. Thank you for checking out the 47 most read stories about React Hook on HackerNoon. to find the most read stories about any technology. Visit the /Learn Repo

54 Stories To Learn About React Native Development

47 Stories To Learn About React Hook

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

0 Stories To Learn About Blockchain Video Games

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

0 Stories To Learn About Blockchain Video Games

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

105 Stories To Learn About Functional Programming

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps