René's URL Explorer Experiment


Title: Reusing Logic with Custom Hooks – React

Open Graph Title: Reusing Logic with Custom Hooks – React

X Title: Reusing Logic with Custom Hooks – React

Open Graph Description: The library for web and native user interfaces

X Description: The library for web and native user interfaces

Opengraph URL: https://ru.react.dev/learn/reusing-logic-with-custom-hooks

X: @reactjs

direct link

Domain: ru.react.dev

fb:app_id623268441017527
og:typewebsite
og:imagehttps://ru.react.dev/images/og-learn.png
twitter:cardsummary_large_image
twitter:creator@reactjs
twitter:imagehttps://ru.react.dev/images/og-learn.png
google-site-verificationsIlAGs48RulR4DdP95YSWNKZIEtCqQmRjzn-Zq-CcD0
algolia-search-order50
msapplication-TileColor#2b5797
theme-color#23272f

Links:

Learn more.https://conf.react.dev/
https://ru.react.dev/
Reacthttps://ru.react.dev/
v19.1https://ru.react.dev/versions
Learnhttps://ru.react.dev/learn
Referencehttps://ru.react.dev/reference/react
Communityhttps://ru.react.dev/community
Bloghttps://ru.react.dev/blog
https://ru.react.dev/community/translations
https://github.com/facebook/react/releases
Quick Start https://ru.react.dev/learn
Tutorial: Tic-Tac-Toe https://ru.react.dev/learn/tutorial-tic-tac-toe
Thinking in React https://ru.react.dev/learn/thinking-in-react
Installation https://ru.react.dev/learn/installation
Начать новый React-проект https://ru.react.dev/learn/creating-a-react-app
Build a React App from Scratch https://ru.react.dev/learn/build-a-react-app-from-scratch
Add React to an Existing Project https://ru.react.dev/learn/add-react-to-an-existing-project
Setup https://ru.react.dev/learn/setup
Editor Setup https://ru.react.dev/learn/editor-setup
Using TypeScript https://ru.react.dev/learn/typescript
React Developer Tools https://ru.react.dev/learn/react-developer-tools
React Compiler https://ru.react.dev/learn/react-compiler
Describing the UI https://ru.react.dev/learn/describing-the-ui
Your First Component https://ru.react.dev/learn/your-first-component
Importing and Exporting Components https://ru.react.dev/learn/importing-and-exporting-components
Writing Markup with JSX https://ru.react.dev/learn/writing-markup-with-jsx
JavaScript in JSX with Curly Braces https://ru.react.dev/learn/javascript-in-jsx-with-curly-braces
Passing Props to a Component https://ru.react.dev/learn/passing-props-to-a-component
Conditional Rendering https://ru.react.dev/learn/conditional-rendering
Rendering Lists https://ru.react.dev/learn/rendering-lists
Keeping Components Pure https://ru.react.dev/learn/keeping-components-pure
Your UI as a Tree https://ru.react.dev/learn/understanding-your-ui-as-a-tree
Adding Interactivity https://ru.react.dev/learn/adding-interactivity
Responding to Events https://ru.react.dev/learn/responding-to-events
State: A Component's Memory https://ru.react.dev/learn/state-a-components-memory
Render and Commit https://ru.react.dev/learn/render-and-commit
State as a Snapshot https://ru.react.dev/learn/state-as-a-snapshot
Queueing a Series of State Updates https://ru.react.dev/learn/queueing-a-series-of-state-updates
Updating Objects in State https://ru.react.dev/learn/updating-objects-in-state
Updating Arrays in State https://ru.react.dev/learn/updating-arrays-in-state
Managing State https://ru.react.dev/learn/managing-state
Reacting to Input with State https://ru.react.dev/learn/reacting-to-input-with-state
Choosing the State Structure https://ru.react.dev/learn/choosing-the-state-structure
Sharing State Between Components https://ru.react.dev/learn/sharing-state-between-components
Preserving and Resetting State https://ru.react.dev/learn/preserving-and-resetting-state
Extracting State Logic into a Reducer https://ru.react.dev/learn/extracting-state-logic-into-a-reducer
Passing Data Deeply with Context https://ru.react.dev/learn/passing-data-deeply-with-context
Scaling Up with Reducer and Context https://ru.react.dev/learn/scaling-up-with-reducer-and-context
Escape Hatches https://ru.react.dev/learn/escape-hatches
Referencing Values with Refs https://ru.react.dev/learn/referencing-values-with-refs
Manipulating the DOM with Refs https://ru.react.dev/learn/manipulating-the-dom-with-refs
Synchronizing with Effects https://ru.react.dev/learn/synchronizing-with-effects
Возможно, вам не нужен Эффект https://ru.react.dev/learn/you-might-not-need-an-effect
Lifecycle of Reactive Effects https://ru.react.dev/learn/lifecycle-of-reactive-effects
Separating Events from Effects https://ru.react.dev/learn/separating-events-from-effects
Removing Effect Dependencies https://ru.react.dev/learn/removing-effect-dependencies
Reusing Logic with Custom Hooks https://ru.react.dev/learn/reusing-logic-with-custom-hooks
Learn Reacthttps://ru.react.dev/learn
Escape Hatcheshttps://ru.react.dev/learn/escape-hatches
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#undefined
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#custom-hooks-sharing-logic-between-components
onlinehttps://developer.mozilla.org/en-US/docs/Web/API/Window/online_event
offlinehttps://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event
synchronizedhttps://ru.react.dev/learn/synchronizing-with-effects
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component
useStatehttps://ru.react.dev/reference/react/useState
useEffecthttps://ru.react.dev/reference/react/useEffect
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#hook-names-always-start-with-use
useStatehttps://ru.react.dev/reference/react/useState
configured for React,https://ru.react.dev/learn/editor-setup#linting
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#should-all-functions-called-during-rendering-start-with-the-use-prefix
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#custom-hooks-let-you-share-stateful-logic-not-state-itself
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
lift it up and pass it downhttps://ru.react.dev/learn/sharing-state-between-components
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#passing-reactive-values-between-hooks
need to be pure.https://ru.react.dev/learn/keeping-components-pure
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
“reacts” to your changeshttps://ru.react.dev/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#passing-event-handlers-to-custom-hooks
Wrap this event handler into an Effect Event to remove it from the dependencies:https://ru.react.dev/learn/removing-effect-dependencies#wrapping-an-event-handler-from-the-props
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks
You shouldn’t need Effects very often,https://ru.react.dev/learn/you-might-not-need-an-effect
it’s correct to keep these Effects separate from each other.https://ru.react.dev/learn/removing-effect-dependencies#is-your-effect-doing-several-unrelated-things
unnecessary dependencieshttps://ru.react.dev/learn/removing-effect-dependencies
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#keep-your-custom-hooks-focused-on-concrete-high-level-use-cases
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#custom-hooks-help-you-migrate-to-better-patterns
“escape hatch”https://ru.react.dev/learn/escape-hatches
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
useStatehttps://ru.react.dev/reference/react/useState
useEffect.https://ru.react.dev/reference/react/useEffect
navigator.onLinehttps://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine
useSyncExternalStorehttps://ru.react.dev/reference/react/useSyncExternalStore
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
design system,https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#will-react-provide-any-built-in-solution-for-data-fetching
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#there-is-more-than-one-way-to-do-it
requestAnimationFramehttps://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
hold in a refhttps://ru.react.dev/learn/manipulating-the-dom-with-refs
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
class:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
CSS Animation:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#recap
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#challenges
https://ru.react.dev/learn/reusing-logic-with-custom-hooks#extract-a-usecounter-hook
Отрыть в песочницеhttps://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-react-app
Предыдущая главаRemoving Effect Dependencieshttps://ru.react.dev/learn/removing-effect-dependencies
https://opensource.fb.com/
@sawaratsuki1004https://twitter.com/sawaratsuki1004
Изучайте Reacthttps://ru.react.dev/learn
Быстрый стартhttps://ru.react.dev/learn
Установкаhttps://ru.react.dev/learn/installation
Описание интерфейсаhttps://ru.react.dev/learn/describing-the-ui
Добавление интерактивностиhttps://ru.react.dev/learn/adding-interactivity
Управление состояниемhttps://ru.react.dev/learn/managing-state
Обходные путиhttps://ru.react.dev/learn/escape-hatches
Справочник APIhttps://ru.react.dev/reference/react
API Reacthttps://ru.react.dev/reference/react
API React DOMhttps://ru.react.dev/reference/react-dom
Сообществоhttps://ru.react.dev/community
Кодекс поведенияhttps://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md
Встреча с командойhttps://ru.react.dev/community/team
Контрибьюторы документацииhttps://ru.react.dev/community/docs-contributors
Благодарностиhttps://ru.react.dev/community/acknowledgements
Блогhttps://ru.react.dev/blog
React Nativehttps://reactnative.dev/
Конфиденциальностьhttps://opensource.facebook.com/legal/privacy
Условияhttps://opensource.fb.com/legal/terms/
https://www.facebook.com/react
https://twitter.com/reactjs
https://bsky.app/profile/react.dev
https://github.com/facebook/react
Обзорhttps://ru.react.dev/learn/reusing-logic-with-custom-hooks
Custom Hooks: Sharing logic between components https://ru.react.dev/learn/reusing-logic-with-custom-hooks#custom-hooks-sharing-logic-between-components
Extracting your own custom Hook from a component https://ru.react.dev/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component
Hook names always start with use https://ru.react.dev/learn/reusing-logic-with-custom-hooks#hook-names-always-start-with-use
Custom Hooks let you share stateful logic, not state itself https://ru.react.dev/learn/reusing-logic-with-custom-hooks#custom-hooks-let-you-share-stateful-logic-not-state-itself
Passing reactive values between Hooks https://ru.react.dev/learn/reusing-logic-with-custom-hooks#passing-reactive-values-between-hooks
Passing event handlers to custom Hooks https://ru.react.dev/learn/reusing-logic-with-custom-hooks#passing-event-handlers-to-custom-hooks
When to use custom Hooks https://ru.react.dev/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks
Custom Hooks help you migrate to better patterns https://ru.react.dev/learn/reusing-logic-with-custom-hooks#custom-hooks-help-you-migrate-to-better-patterns
There is more than one way to do it https://ru.react.dev/learn/reusing-logic-with-custom-hooks#there-is-more-than-one-way-to-do-it
Подведение итоговhttps://ru.react.dev/learn/reusing-logic-with-custom-hooks#recap
Испытанияhttps://ru.react.dev/learn/reusing-logic-with-custom-hooks#challenges

Viewport: width=device-width, initial-scale=1

URLs of crawlers that visited me.