Klass komponentlardan, funksional komponentlarga o’tish nisbatan qiyin bo’lishi mumkin, ayniqsa siz lifecycle metodidan juda ko’p foydalansangiz.Lekin sizni ishontirib aytishim mumkin, funksional komponentlardan foydalanish juda ham oson. Ba’zi bir, juda ham kam holatlarda ishlatiladigan metodlardan funksional komponentlar ichida foydalana olmasak ham, ushbu maqolada doimiy ishlatiladigan va sizga hayotiy loyiharda foydasi tegadigan lifecycle metodlarni qanday ishlatilishi haqida ma’lumot beramiz.


Lifecycle metodlaridan funksional komponent ichida foydalanishimiz uchun, bizga faqatgina useEffect() hook metodi kerak bo’ladi, va bu metodimiz react-dan import qilinadi: import {useEffect} from react; Ushbu metodimiz birinchi argumentiga funksiya, va ikkinchisiga array oladi. Ushbu hook metodimiz ikkinchi argument array ichidagi qiymatlardan birortasi o’zgargan…

Photo by Ferenc Almasi on Unsplash

In the first part, we have seen how to set up our client-side routing using react-router-dom. In this part, we are going to explore some of the very useful hooks from react-router-dom.


Have you ever noticed that most websites use dynamic routes, for example, if you visit an article on a blogging website its URL should probably be like exampleblog.com/post/how-to-write-blog matching its title. Probably they don’t create every new route for their article manually. What they use is dynamic routing, the title here /how-to-write-blog is URL parameter, and depending on this our page would retrieve data needed for this title…

Photo by Nick Fewings on Unsplash

All codes below in codesandbox — https://codesandbox.io/s/exciting-cloud-e2ts7?file=/src/App.js:248-475

If you are a fresh beginner in React.js this topic might be a little bit complex for you, but I will do my best to help you build a foundation for your future projects. So unlike server-side rendering, react uses client-side rendering which means all navigations happen independently on the client-side. In this article, we will see how we can set up page navigation in other words routing in react.

To apply routing in react we use a popular npm package called react-router-dom, so let’s install it, in your terminal write this:


You can check out the first part here.

Extracting reusable code

Like you do in most programming languages you can extract fragments of your code to make it reusable. In Sass, it is pretty simple let's say we are going to center any child elements using flex, we can write:

@mixin center{
display: flex;
align-items: center;
justify-content: center;

Notice that every keyword in Sass starts with the ‘@’ symbol. Here we used the mixin keyword which tells our Sass compiler that this is a block of code that could be reused somewhere. …

Sass is a Syntactically Awesome Style Sheets, which means is that it is just an improved and feature-rich version of CSS, and at the end, it compiles down to CSS. This tool makes your work much easier, you write less, you make your code reusable and more readable.

Setup in React

Before we start learning these awesome features let’s tackle how to use sass in React.js. It is very simple we just need to install node-sass module. I will use npm but you are good to go with yarn:

npm i node-sass

Now we can directly import our sass files into our components…

Photo by Mael BALLAND on Unsplash

Nowadays you can see hooks everywhere in most React codebases. The hooks made it very easy to write code and cut down a number of lines. If you are heavily dependent on hooks and get tired of using hooks in third-party packages for your every smallest problem, this article is for you, as we are going to see how you can write your own custom hook. Custom hooks make it easy to apply custom logic on top of hooks and reduce your code size even more.

First of all, what is a custom hook, in simple language based on my…

Arrays essential part in most programming languages including javascript. Mastering it makes your programming life easier than you think. This article is for javascript beginners, and it provides essential array methods every programmer should know.

Unlike some other programming languages like java, c++, c,… in javascript array size is not fixed, meaning that you can add, remove, and change array size however you want.

Adding new item

push() method is used to add new items to the end of an array. You can pass items as an argument of this method.

let arr = [1,2,3];
arr.push(10, 11);
console.log(arr); //[1,2,3,10,11,100]

unshift() method is…

As a newcomer to the Javascript world, I didn’t know that you can do such cool things as destructuring. If you still don’t know how to use it and your code gets big, now time to learn this cool feature.

What exactly destructuring? To fully understand this concept, first, we should understand what issues it solves. When you starting working on real-life projects or any project which relies mostly on Javascript you find yourself using a lot of arrays and objects. Well, this is not a problem, but the bigger, deeper, and more complex these objects and arrays get, the…

As a programmer, you should master a bunch of skill sets in order to increase your performance and productivity. Choosing the right code editor can also impact hugely on your coding experience, and knowing your editor well is essential. If you were lucky to choose vs code then this article might be beneficial to you. I have listed some popular keyboard shortcuts below which I use very often and helps me a lot in completing my task faster.


ctrl + P is used to search for files in the root directory opened in VS Code.

ctrl + F is used…

Ok, this is my first ever article, so love to hear your feedbacks and open to correct my mistakes.

Migrating from class-based components to functional components can be pretty painful, especially when you heavily rely on lifecycle methods. But fear no more, it is pretty straightforward than it might look. Although some lifecycle methods can’t be accessed in functional components, which I will talk about later, this article covers the most used and popular ones.

useEffect() is the only hook that we need to access lifecycle functionalities and it is imported from react. This hook gets function for the first…

Ali Toshmatov

React dev.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store