When I was working on a react project that used react context API I noticed that whenever I update the context, all components in the top most parent (which was App.js) updated while I just wanted one of them update, because the other components didn’t use data from context and had their own state. So […]

With react Router we can create web applications with multiple pages and sections and we can change them dynamically. Attention to detail is the key to make any UI design look professional, one of the most important things in user experience design is using the right animations and transitions when user interacts with our product. […]

We should always develop smooth and fast websites and web apps, while js can help us with creating animations, js animations sometimes lag on low end mobile devices and it’s always better to use css instead of javascript whenever possible. In today’s quick tutorial we’ll create a a dropdown menu only with css. what we […]

The front end development scene has changed a lot in recent years. client side apps and websites just grow bigger and bigger and you may end up spending a lot of your precious time doing simple tasks like copying files and adding js and css files to your html files, can’t we make those tasks […]

In previous article We created a simple shopping cart app with react context api and hooks. in this article we’ll see how different this project can be if we use redux. and then compare these two approaches and see what advantages and disadvantages they have. full project in this github repo Redux overview Redux is […]

Sometimes in our react apps we need some global variables, like user authentications, themes, shopping carts, etc. or maybe you need a state in a big tree of like a dozen of components. without a proper state management we’ll have to pass a state through lot’s of components in our component tree to reach the […]

One of popular new features of react is hooks, which let you use states and other react features within state less components, as a result you will have a cleaner and relatively more reusable code. one of react’s built in hooks is useEffect() which replaces component life cycle methods into one function. but useEffect runs […]