Valtio — The Most Minimal Proxy State Possible in React

Yet another state library for React? Mutable global state for React

Creating React Application For 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.

Build your own unbeatable Tic Tac Toe with React Hooks and Styled Components

Having been working with React for a few years already, I realised that I have only used the framework for developing websites and mobile applications

Build a Custom useFetch React Hook

Learn to build your first custom Hook with simple and easy steps. Learn how to build a custom useFetch React Hook. We will create a custom hook named “useFetch” which will make the API calls, as well as manage the loading and error state. This hook can be re-used whenever we want to fetch data using API calls with no need of managing the loading and error states individually everywhere.

How To Write Your Own Custom React Hooks

Learn how to write your own custom React Hooks. A custom React hook is really a function that runs inside of a component. With hooks and custom React hooks in the application, we can start relying on our components to be responsible for the user interface and hooks being the piece that handles business logic.

Using forwardRef with React Hooks

Learn how to use forwardRef with React Hooks. The forwardRef hooks allows React users to pass refs to child components. The ref can be created and referenced with useRef or createRef and then passed in a parent component. Using forwardRef instead of useRef is useful when a ref needs to be accessed in a parent component.

How to use Canvas with React Hooks

Learn how to create a React project with hooks + Canvas. React Hooks are a new API of the React library that allows us to have state, and other React characteristics, in the components created with a function. Canvas is very useful when we need to make complex animations for our project many times

How to Write a Custom React Hook

React hooks, released in React v16.8. React gives us access to a set of powerful base hooks, like useState , useEffect , useReducer , and others, but we can also build our own custom hooks to abstract complex state logic. Learn how to extract component logic into reusable Hooks. Learn how to write a custom React Hook

How to Use the useReducer React Hook

useReducer is one of a handful of React hooks that shipped in React 16.7. 0. We’ll be taking an in depth look at useReducer and see how we can use useReducer to write better React code. We’ll be looking at a very simple React component and how we can implement useReducer to keep track of state.

Build a Sticky Table Header with React Hooks

Confront table limitations and turn its header into a sticky element with React hooks. Wondering how to make a sticky table header with the help of React in that case? Wondering how to apply the solution into production code? This blog post is for you!

How to Use The useContext API in React

Learn how to use the useContext API in React. This article will lead you to not only understand how the context API works but also what are the things you might have missed & hidden in the background and also most importantly the concepts in state management.

Get to Know the UseState Hook in React.js

Today, we are going to take a look at the `useState`  Hook in React. This article will be the first part of a series of posts on React Hooks. The link for the demo repo used in this article can be found below:

Class-less Components in React

3 Steps to Change Class Components Into Functional Ones

Consuming a REST API with React Hooks (using Design Patterns)

Taking the basics, a bit furtherConsuming a REST API with React Hooks (using Design Patterns). We will be looking at: The basic setup for consuming APIs with react hooks; Abstracting low level plumbing calls away; Further abstracting where it makes sense

Best Practices for React Hooks

Learn how to use React Hooks like a professional. The React Hook API is incredibly powerful when used correctly. Let’s take a look at some best practices for using React Hooks to ensure you’re writing clean, efficient, and maintainable code: Use Hooks as They’re Supposed to Be Used; There’s an ESLint Plug-In for React Hooks — Use It; useState Can Be Used With Objects Too; Custom Hooks Are Awesome; Don’t Use Prop Drilling

Upload Image In Cloudinary Using Mern Stack

As a developer, you might have come across this very challenge of uploading an image to any cloud source and also to allow your clients to upload an image to your database.

LifeCycle Methods Replicated with Hooks

The React tutorial will give some explanation of what each lifecycle method is for, and show how you can replicate similar behaviors using the Hooks API. React’s Hook API has been ever more popular and usable in the front-end world. Go from the class-based component architecture and implement same functionality with much faster and cleaner Hooks API!

React: How I learned to create optimized contexts

React: How I learned to create optimized contexts React contexts is a very cool feature, and extremely practical to use with the hooks API. You’ve surely met some, and probably recognize them right way.

Use Constructor in React Functional Component with Custom Hooks

Use Constructor in React Functional Component with Custom Hooks. What functional components in React are missing from class-based components is the feature of the Constructor. We can avoid it by using custom Hooks. By moving our logic into a custom Hook, we can have a more clean “constructor”.

How to Create a YouTube ‘Latest Video Viewer’ with React

In this tutorial, we’ll use some of the basics of React including React hooks to build a simple app that lists the latest YouTube videos for a particular channel.