React Hooks by Oleksandr Oleksiv Scalac
0 likes•56 views
React Hooks allow functional components to use state and other React features that were previously only available in class components. Hooks solve problems like wrapper hell and make it easier to share logic between components. Common Hooks include useState for managing local state, useEffect for lifecycle methods, useContext for consuming context, and useMemo for memoization. Hooks must follow some rules like being called at the top level and only used in functional components.
React Hooks by Oleksandr Oleksiv Scalac
- 2. React Hooks
- 3. What are React Hooks? React Hooks are functions that allow to “power up” your functional components with class-only features (e.g. state, lifecycle hooks, etc.)
- 4. Functional Class-based Great for presentation Properties as input, JSX as output Single purpose focus Components orchestration Work with props and state Hold the business logic
- 5. Problems Wrapper hell Extending components with new functionality Lifecycle hooks
- 6. Components with Hooks Easier to maintain Flexible Easier to manage lifecycle hooks Less code
- 8. WStateful component without React hooks
- 10. WUse multiple properties in single useState(...) hook
- 11. useEffect(...)
- 12. WStateful component with lifecycle hooks
- 13. The same component, but with useEffect(...) hook
- 14. useContext(...)
- 15. Provider provides the context in a wrapper component...
- 16. ...and context can be consumed inside child components via useContext(...) hook, instead of using Context.Consumer wrapper
- 17. useMemo(...)
- 18. useMemo(...) is an alternative to traditional shouldcomponentUpdate lifecycle hook. In this case it makes sure that <TodoList/> component re-renders only if It’s input changes
- 19. Rules of Hooks All hooks should be used at top level Hook’s can’t be declared conditionally Use hooks ONLY inside functional components and custom hooks The order matters
- 20. THANK YOU