React-Redux/ Front-end/ By Nima Shokouhfar
This mind map offers a detailed exploration of React and Redux Toolkit usage, diving into various concepts and hooks used in modern React development. Key sections include: Redux Toolkit: Details on using Redux with Next.js, highlighting specific documentation pitfalls to avoid with Next 14. React Commands: Command examples like npx create-react-app for initializing React applications, especially with TypeScript. React Hooks: useState, useEffect, useRef, and useReducer are discussed with ...
1. Styles
1.1. bad
1.2. good
1.3. not as good
1.4. not as bad
1.5. important
1.6. warning
2. main
2.1. redux-toolkit
2.1.1. next
2.1.1.1. next 14
2.1.1.1.1. 2
2.1.1.1.2. 3
2.1.1.2. next 14
2.1.1.2.1. 2
2.2. react
2.2.1. commands
2.2.1.1. npx create-react-app my-app --template typescript
2.2.1.1.1. for typescript app
2.3. React-native for web
2.4. React-native
2.4.1. Next level topic
2.5. author
2.5.1. Dave Gray
2.6. react
2.6.1. Suspense
2.6.1.1. Suspense is a component that lets you "pause" the rendering of part of your component tree until some asynchronous operation has completed, such as data fetching or loading code chunks.
2.6.1.2. It's often used with React.lazy for code-splitting and with libraries like React Query or Relay for handling data-fetching operations.
2.7. hooks
2.7.1. types
2.7.1.1. useState
2.7.1.1.1. it is like a golab variable or database
2.7.1.1.2. useState vs useRef
2.7.1.2. useEffect
2.7.1.2.1. runs everytime the component updated
2.7.1.2.2. dependencies
2.7.1.3. useRef
2.7.1.3.1. Changing a ref does not trigger a re-render.
2.7.1.3.2. use case
2.7.1.3.3. notes
2.7.1.4. use reducer
2.7.1.4.1. code
2.7.1.5. useContext
2.7.1.5.1. code
2.7.1.6. optimization
2.7.1.6.1. useMemo
2.7.1.6.2. useCallaback
2.7.1.7. code injection
2.7.1.7.1. useImpreativeHandle
2.7.1.7.2. useLayoutEffect
2.7.1.8. useDebugValue
2.7.1.8.1. useful for building custom hooks from scratch
2.7.2. Web hooks