Skip to main content

Command Palette

Search for a command to run...

React Summary Day-5

Published
3 min readView as Markdown

Heyy Everyonee! This is Day-5 of learning react from Hitesh Sir(Chai Aur Code), The series is amazing, hitesh sirr explains all the things so well and give behind the scene understanding. Today i did the small project of password generator, ofcourse i didnt do it myself, i see hitesh sir building it and build it with him. Though the project may seem simple, but i learned a lot from it. I learned 3 more hooks, useEffect, use Callback and useRef. In this project i learned the thought process behind building something, how to think, how to approach, how to proceed to make a good product. I learned how to optimize things. What things have to taken care off, how to handle things.

Today i learned which hook i have to use if i have to carry out particular task when something is changed or manipulated. Like in the project, there is 3 variables of which one of them changes, the pasword has to change. Like if i change the length from 6 to 10 then new password should generate of length 10. Furthermore, there is 2 more variable, numbers and characters, means if the password contains number or any special character or both. So if any of this 3 changes, password has to change. So to do so, useEffect is used. useEffect expects the callback function and the dependency array, meaning , all the tasks that affects the password, should write in dependency array. Like length, number is allowed or not, character allowed or not. And also the password generation function itself cause if that functions runs from any factor then also i want it to execute.

Another hook i learned is useCallback. its same as useEffect, it also excepts a callback function and dependency array, but there is huge difference between two, the difference is, that we use useCallback for memoization, means the factors we write in dependency array gets cached for faster access while generating password. It is used for optimizatons. It is time consuming to regenerate password at every step when lenght change when numbers aor characters are allowed, so for optimization, what we do is that we memoize the previous password, we put it in cache, so for regeneration of password, we can generate faster.

Another hook is useRef, its quite simple, by using it, we can hold the reference of anything, and we can connect two entities with it. in project we used it to reference the password generated in input field, to give effect of selecting the password when clicked on copy to give user a better experience.

This is it for today, though first this project seem easy, but its not that easy, its doable but not very easy, and most importantly i learned thought process behind building project, and hooks.

More from this blog

React Learning(with chai)

9 posts