Part 1: diving into useState() — I am starting a series of articles to share my humble experience using React hooks. Playground: https://stackblitz.com/edit/react-ouuecu?file=src/App.js I will start first with useState, where I will talk about three points: useState is asynchronous setting state with callbacks Object vs atomic state useState is asynchronous I initially wrote an article before talking about my…

Fetch and validate the data before rendering the component — Source code: https://github.com/AbdelrhmanAmin/React-Dynamic-Routes-Manager The problem: To illustrate the problem let’s take for example users’ profiles. I would define dynamic routes with a param users/:userId and would render the profile component and inside of the component I would get the userId from useParams and inside of useEffect I would make a fetch request…

Hello, I am a front-end developer and I want to share my opinion regarding why you shouldn’t always use useState . TL;DR: useStateis an asynchronous hook and it doesn’t change the state immediately, it has to wait for the component to re-render. useRefis a synchronous hook that updates the state…

In this article I want to share my solution to create a dynamic smooth animation transition using max-height in Reactjs. Introduction Recently I had a task to build a “collapsible menu”, As you probably know, height doesn’t have smooth transition, it is instant. Thus, I chose to use max-height, however the…

Using reduce() with map(), sort(), filter() and reverse — Are you ready to be friends withreduce ? I know it is scary…But, you have to. reduce is one vague and scary method unlike filter ,map , and forEach . The problem with reduce is: why on earth do I need to use it?! Today, I will tell you what…

Hello :) This is a quicky article. I am going to explain what is middleware in Redux and what is Thunk. If you don’t understand Redux well enough, I suggest that you read my article on Redux. What is middleware? Reducers in Redux must be always pure functions, which means you CAN’T do…

Using useEffect Hook Correctly with React — First, let me confuse you by saying that useEffectis “the unification” of 3 React Class component lifecycle methods combined in one hook (AKA method). If you don’t know what is “lifecycle methods”, I suggest that you read my article about components. These lifecycle methods are: 1.ComponentDidMount: did the component render? …

Understand the Difference Between Pure and Impure Functions in JavaScript — Today, I am going to explain what is “pure” and “impure” in JavaScript. 1- Pure Function: Predictable Has no side-effects 2- Impure Function: Unpredictable Has side-effects That’s it :) Thank you for reading…… Just kidding, let me explain few things: Predictable: Look at this example and tell me what is the output of calling add function with…

Hello :) I am a graduate student from Microverse, during interview prep, they gave me access to a set of questions in order to practice. I am sharing some of the questions and answering them myself. NOTE: If you find any mistake or a potentially wrong answer, please let me…