-
useState This hook allows you to maintain local state of an application
-
useEffect the hook that manages side-effects in functional React components.
-
useRef
-
useMemo To improve user interface performance, React offers a higher-order component React.memo(). When React.memo() wraps a component, React memoizes the rendered output then skips unnecessary rendering.
-
useContext React’s useContext hook makes it easy to pass data throughout your app without manually passing props down the tree.
import React, { createContext } from "react"; export const UserContext = createContext(); <UserContext.Provider value="Naveen"> </UserContext.Provider>
in child components
const user = useContext(UserContext);
-
useReducer
-
useReducer & useContext
-
useCallback Every callback function should be memoized to prevent useless re-rendering of child components that use the callback function” is the reasoning of his teammates.
Redux Redux is predectable state container for javascript apps
- Keep components small and function-specific
- Adopt tools to help you scale
- Reusability is important, so keep creation of new components to the minimum required
- Consolidate duplicate code – DRY your code
- Put CSS in JavaScript
- Build your UI/logic component library
- Comment only where necessary
- Name the component after the function
- Use capitals for component names
- Mind the other naming conventions submitForm, submit_form, or submit_form
- Separate stateful aspects from rendering
- Code should execute as expected and be testable
- All files related to any one component should be in a single folder