Scribd
Upload
12 views

Notes

The document provides notes on using various tools and commands in a React development environment, including shortcuts for VSCode, creating a Vite project, and managing state with React hooks and Context API. It emphasizes the importance of minimizing re-renders and introduces state management libraries like Recoil, Zustand, and Redux. Additionally, it discusses the concept of side effects in React components and how to handle them using the useEffect hook.

Uploaded by

Kartikay Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

Notes

The document provides notes on using various tools and commands in a React development environment, including shortcuts for VSCode, creating a Vite project, and managing state with React hooks and Context API. It emphasizes the importance of minimizing re-renders and introduces state management libraries like Recoil, Zustand, and Redux. Additionally, it discusses the concept of side effects in React components and how to handle them using the useEffect hook.

Uploaded by

Kartikay Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Notes:

npx nodemon index.js --> to run using nodemon


.jsx stands for JavaScript and XML

Ctrl + Enter --> To go to next line in VSCode


Ctrl + / --> To comment multiple lines
Shift + Alt + downArrow --> Replicate current line to next line
Ctrl + Shift + L ----> To Edit all occurance of a word together
Ctrl + Shift + P ---> To warp selected code in some tag. I created this binding
Ctrl + Shift + ` ---> To open terminal in vs

To get dist folder :


npm run build
npx http-server dist

to render dynamic variable in react we enclose it in {}.

Creating Vite project:

npm create vite@latest


Enter project name
cd project-name
npm run dev

U can open current folder in VSCode directly from cmd by entering command "code ."

To open current folder from file Explorer in cmd : Alt+D and then type cmd

In react state variable should be present- at lowest common ancestor of elements to


minimize number of re-renders.

We can also use React.memo to stop re-rendering of those componests whose props are
unchanged

Side effect is something that encompasses any operatioins that reach outside the
functional scope of React component. These operations can affect outer components,
interact with the browser or perform asynchronous fetching. eg: setTimeout, fetch,
setInterval. These should be seprate from rendering cycle.

Hooks: They allow functional components to have access to stateful logic and
lifecycle features.

Some hooks are: useState, useEffect, useCallback, useMemo, useRef, useContext

useEffect hook allows u to perform side effects in function components. Side


effects are operations taht can affect other components or cant be done during
rendering such as data fethcing, subscription or manually changing dom in react
components.

First function inside useEffect should not by async. If u really want to make is
async either define function outside or use useAsyncEffect library.

Using Context API doesn't make application more performant. Its just a syntactic
sugar. Still the middle components that lie between parent and the untimate child
that needs state variable are rerendered. It just make syntax cleaner. This only
solves problem of prop drilling.
To solve the above shortcoming of context api we use state management libraries.

State and Components are kept in seprate folder in a Project.

State Management Libraries : Recoil, Zustand, Redux

Using recoil we can make only those components re-render whose state changes.

You might also like