\n\nThese docs are old and won’t be updated. Go to react.dev for the new React docs.
\nThese new documentation pages teach modern React:
\n\n
\n- \n
react: Hooks
Hooklar React 16.8-ə əlavə olunan yenilikdir. Hooklar ilə sinif yazmadan state və ya digər React xüsusiyyətlərindən istifadə edə bilərsiniz.
\nBu səhifədə React-in daxili Hooklarının API-ları təsvir edilir.
\nƏgər Hooklara yeni başlamısınızsa, icmal səhifəsindən başlamağı tövsiyə edirik. Əlavə olaraq, çox verilən suallar bölməsindən faydalı məlumatlar ala bilərsiniz.
\nuseStateuseEffectuseContextuseState \n\nThis content is out of date.
\nRead the new React documentation for
\nuseState.
const [state, setState] = useState(initialState);State dəyəri və bu dəyəri yeniləmək üçün funksiya qaytarır.
\nİlk render zamanı qaytarılan state (state) ilk arqumentə göndərilən dəyərə (initialState) bərabərdir.
setState funksiyası state-i yeniləmək üçün işlədilir. Bu funksiya yeni state dəyəri qəbul edir və komponenti yeniden render etmə sırasına əlavə edir.
setState(newState);Sonrakı render etmələr zamanı useState funksiyasından qaytarılan dəyər ən yeni state dəyəri olacaq.
\n\nQeyd
\nReact,
\nsetStatefunksiyasının identikliyinin stabil olduğunu və yenidən render etmələr zamanı dəyişmədiyini siğortalayır. Bu səbəbdən, bu funksiyanıuseEffectvə yauseCallbackHooklarının asılılıq siyahısına əlavə etmək lazım deyil.
Yeni state-i əvvəlki state əsasında hesablamaq üçün setState funksiyasına yeniləmə funksiya göndərə bilərsiniz. Bu funksiya, əvvəlki state dəyərini arqument kimi qəbul edir və yenilənəcək dəyəri qaytarır. Aşağıdakı sayğac nümunəsində setState funksiyasının hər iki (funksiya və sadə) forması göstərilir:
function Counter({initialCount}) {\n const [count, setCount] = useState(initialCount);\n return (\n <>\n Say: {count}\n <button onClick={() => setCount(initialCount)}>Sıfırla</button>\n <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>\n <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>\n </>\n );\n}”+” və ”-” düymələri tıklandıqda yeniliyin əvvəlki state-dən asılı olduğundan bu düymələrdə yeniləmə funksiyasının funksional formasından istifadə edilir. Lakin, “Sıfırla” düyməsi sayğacın dəyərini ilkin dəyərə qaytardığından bu düymədə yeniləmə funksiyasının sadə formasından istifadə edilir.
\nYeniləmə funksiyası cari dəyərə bərabər olan dəyər qaytardıqda sonrakı yenidən render etmə əməliyyatı tamamilə atlanacaq.
\n\n\nQeyd
\nSinif komponentlərində olan
\nsetStatefunksiyasından fərqli olaraquseStateHooku yeni obyektləri köhnə state-ə birləşdirmir. Siz, funksiya formasından və obyekt yayma sintaksisindən istifadə edərək sinif komponentlərində olan state davranışını tətbiq edə bilərsiniz:\nconst [state, setState] = useState({});\nsetState(prevState => {\n // Burada Object.assign funksiyası da işləyəcək\n return {...prevState, ...updatedValues};\n});Bunu,
\nuseReducerHooku işlədərək də tətbiq etmək mümkündür. Bu Hook, bir neçə sub-dəyərdən asılı state obyektlərini idarə etmək üçün daha uyğundur.
initialState arqumenti yalnız ilk render zamanı işlədilir. Bu dəyər sonrakı render etmələr zamanı işlədilmir. Əgər ilkin state bahalı hesablamanın nəticəsidirsə, ilkin dəyərə yalnız ilkin render zamanı çağrılan funksiya göndərə bilərsiniz:
const [state, setState] = useState(() => {\n const initialState = someExpensiveComputation(props);\n return initialState;\n});Əgər State Hooku cari dəyərinə bərabər dəyər ilə yenilənirsə, React, uşaqları render etmədən və effektləri çağırmadan bu yeniliyi atlayacaq. (React, Object.is müqayisə alqoritmindən istifadə edir.)
Nəzərə alın ki, React, yeniliyi atlamadan öncə spesifik komponenti render edə bilər. Bu davranışdan narahat olmaq lazım deyil. Çünki, React lazımsız yerə ağacın “dərinliyinə” getməyəcək. Əgər render zamanı bahalı hesablamalar edirsinizsə bu hesablamaları useMemo Hooku ilə optimallaşdıra bilərsiniz.
React may group several state updates into a single re-render to improve performance. Normally, this improves performance and shouldn’t affect your application’s behavior.
\nBefore React 18, only updates inside React event handlers were batched. Starting with React 18, batching is enabled for all updates by default. Note that React makes sure that updates from several different user-initiated events — for example, clicking a button twice — are always processed separately and do not get batched. This prevents logical mistakes.
\nIn the rare case that you need to force the DOM update to be applied synchronously, you may wrap it in flushSync. However, this can hurt performance so do this only where needed.
useEffect \n\nThis content is out of date.
\nRead the new React documentation for
\nuseEffect.
useEffect(didUpdate);İmperativ və ola bilsin effektli kod ehtiva edən funksiya qəbul edir.
\nMutasiyalar, abunəliklər, taymerlər, loqqinqlər və digər yan effektlərini funksiya komponentinin əsas gövdəsindən (digər sözlə React-in render fazası) çağırmaq olmaz. Bu, qarışıq baqlara və UI-da uyğunsuzluqlara səbəb ola bilər.
\nƏvəzinə useEffect Hookundan istifadə edin. useEffect-ə göndərilən funksiya, render olunan komponent ekranda göründükdən sonra çağrılacaq. Effektlərə React-in funksional dünyasından imperativ dünyaya açılan qapı kimi baxın.
Normalda, effektlər hər render əməliyyatından sonra icra edilir. Lakin, effektləri yalnız müəyyən dəyərlər dəyişəndə icra etmək mümkündür.
\nAdətən, abunəlik və ya taymer kimi effektlər yarandıqda bu effektlər komponentlər silinmədən öncə təmizlənməlidir. useEffect-ə göndərilən funksiya təmizləmə funksiyası qaytararaq təmizlik işlərini icra edə bilər. Məsələn, abunəlik düzəltmək üçün:
useEffect(() => {\n const subscription = props.source.subscribe();\n return () => {\n // Abunəliyi sil\n subscription.unsubscribe();\n };\n});Yaddaş sızmalarının qabağını almaq üçün təmizləmə funksiyası komponent silinməmişdən öncə çağrılır. Əlavə olaraq, əgər komponent bir neçə dəfə render olunursa (normalda belə olur), köhnə effekt yeni effekt icra olunmamışdan öncə silinəcək. Göstərdiyimiz nümunədə hər yeniləmədən sonra yeni abunəlik yaranır. Effektlərin hər yenilik zamanı çağrılmaması üçün sonrakı bölməyə baxın.
\ncomponentDidMount və componentDidUpdate metodlarından fərqli olaraq useEffect-ə göndərilən funksiya brauzer rənglənməsindən sonra (təxira salınmış hadisə ilə) çağrılır. Bu səbəbə görə bir çox yan effetlərdən (abunəlik və hadisə işləyiciləri kimi) istifadə etmək mümkündür. Çünki, bu işlərinin çoxu səhifənin brauzer ilə render edilməsinin qarşısını almamalıdır.
Lakin, bütün effektlər təxirə salına bilmir. Məsələn, istifadəçinin vizual uyğunsuzluğu görməməsi üçün istifadəçinin dərhal görəcəyi DOM mutasiyası sonrakı rənglənmədən öncə sinxron çağrılmalıdır. (Bu fərq, passiv və ya aktiv hadisə dinləyiciləri ilə konseptual olaraq eynidir.) Bu tip effektlər üçün React-dəuseLayoutEffect adlı əlavə Hook mövcuddur. Bu Hookun imzası useEffect ilə eynidir. Bu iki Hook arasındakı əsas fərq effektlərin nə zaman çağrılması ilə əlaqəlidir.
useEffect çağırışının brauzer rəngləndikdən sonraya təxirə salınmasına baxmayaraq bu Hookun yeni render etmədən öncə çağrılmasına zəmanat verilir. React həmişə yeni yenilik olmadan öncə köhnə render effektlərini çağıracaq.
\n\nNote
\nThis only affects the timing of when the function passed to
\nuseEffectis called - updates scheduled inside these effects are still deferred. This is different thanuseLayoutEffect, which fires the function and processes the updates inside of it immediately.
Even in cases where useEffect is deferred until after the browser has painted, it’s guaranteed to fire before any new renders. React will always flush a previous render’s effects before starting a new update.
Normalda, effektlər hər render etmə zamanı çağrılırlar. Belə olduqda effektin asılılıqlarından biri dəyişdikdə effekt yenidən yaranacaq.
\nLakin, əvvəlki bölmədə olan abunəlik nümunəsində olduğu kimi hallarda bu davranış tez-tez baş verə bilər. Biz, hər yenilikdən sonra abunəlik yaratmalı deyilik. Abunəliyi yalnız source propu dəyişdikdə yaratmaq bəsdir.
Bunu tətbiq etmək üçün useEffect Hookunun ikinci arqumentinə effektin asılı olduğu dəyərləri massiv şəklində göndərə bilərik. Bizim yeni nümunəmiz aşağıdakı formada olacaq:
useEffect(\n () => {\n const subscription = props.source.subscribe();\n return () => {\n subscription.unsubscribe();\n };\n },\n [props.source],\n);İndi, yeni abunəlik yalnız props.source dəyişdikdə yaranacaq.
\n\nQeyd
\nBu optimallaşmadan istifadə etdikdə massivdə effektin istifadə etdiyi vaxt ilə dəyişən və komponent scope-unda olan (state və proplar kimi) bütün dəyərləri təyin edin. Əks halda, kodunuz əvvəlki render etmələr zamanından qalan köhnə dəyərləri görəcək. Funksiyaların necə idarə edilməsi və massiv dəyərləri tez-tez dəyişdikdə nə ediləcəyi haqqda əlavə məlumat üçün göstərilən linklərə baxın.
\nƏgər effekti bir dəfə çağırıb və bir dəfə təmizləmək (mount və unmount zamanı) istəyirsinizsə, ikinci arqumentə boş massiv (
\n[]) göndərə bilərsiniz. Bu, React-ə effektin heç bir state və ya proplardan asılı olmadığını və bu səbəbdən heç bir zaman çağrılmayacağını bildirir. Bu xüsusi ssenari deyil — asılılıqlar massivi bu formada işləyir.Effektə boş massiv (
\n[]) göndərdikdə effektdə olan state və proplar hər zaman ilkin dəyəri saxlayacaqlar. İkinci arqumentə[]massivi göndərməyincomponentDidMountvəcomponentWillUnmountmetodlarını işlətməyə yaxın olmasına baxmayaraq effektlərin tez-tez çağrılmasının qabağını almaq üçün daha yaxşı həllər var. Əlavə olaraq, React-inuseEffectçağırışlarını brauzer rənglənməsindən sonraya kimi təxirə saldığını və bu səbəbdən əlavə işin problem olmadığını unutmayın.Biz,
\neslint-plugin-react-hookspaketininexhaustive-depsqaydasından istifadə etməyi tövsiyə edirik. Bu qayda, səhv təyin edilən asılılıqları göstərir və düzəliş təklif edir.
Asılılıqlar massivi effekt funksiyasına arqument kimi göndərilmir. Lakin, konseptual olaraq bu asılılıqlar effektdə işlədilən dəyərləri təmsil edirlər. Bu səbəbdən effektdə olan hər bir dəyər asılılıqlar massivində də olmalıdır. Gələcəkdə, bu massiv daha təkmilləşmiş kompilyator ilə avtomatik təyin edilə bilər.
\nuseContext \n\nThis content is out of date.
\nRead the new React documentation for
\nuseContext.
const value = useContext(MyContext);Kontekst obyekti qəbul edir (React.createContext-dan qaytarılan dəyər) və kontekstin cari dəyərini qaytarır. Cari kontekst dəyəri ağacda komponentə ən yaxın olan <MyContext.Provider>-in value propu ilə müəyyən edilir.
Komponentə yaxın olan <MyContext.Provider> yeniləndikdə bu komponent yenidən render edilərir və Hookun dəyəri MyContext provayderinin yeni value dəyəri ilə yenilənir.
useContext Hookunun arqumentinin kontekst obyekti olduğunu unutmayın:
useContext(MyContext)useContext(MyContext.Consumer)useContext(MyContext.Provider)useContext-i çağıran komponent kontekst dəyəri dəyişdikdə hər zaman yenidən render olunacaq. Əgər komponentin render edilməsi bahalıdırsa, memoizasiyadan istifadə edərək komponenti optimallaşdıra bilərsiniz.
\n\nMəsləhət
\nƏgər Hooklardan öncə kontekst API-ı ilə tanışlığınız varsa,
\nuseContext(MyContext)Hooku sinifdəstatic contextType = MyContextdəyişəni və ya<MyContext.Consumer>komponenti ilə eynidir.\n
useContext(MyContext)Hooku yalnız kontekst dəyərini oxumağa və kontekstin dəyişikliklərinə abunə olmağa imkan yaradır. Kontekstə dəyər təmin etmək üçün ağacda komponentdən yuxarıda<MyContext.Provider>əlavə etmək lazımdır.
Context.Provider ilə nümunə
\nconst themes = {\n light: {\n foreground: \"#000000\",\n background: \"#eeeeee\"\n },\n dark: {\n foreground: \"#ffffff\",\n background: \"#222222\"\n }\n};\n\nconst ThemeContext = React.createContext(themes.light);\n\nfunction App() {\n return (\n <ThemeContext.Provider value={themes.dark}>\n <Toolbar />\n </ThemeContext.Provider>\n );\n}\n\nfunction Toolbar(props) {\n return (\n <div>\n <ThemedButton />\n </div>\n );\n}\n\nfunction ThemedButton() {\n const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> Mən tema konteksti əsasında stillənmişən! </button> );\n}Bu nümunə, Kontekst sənədində olan nümunənin Hooklar üçün dəyişdirilmiş formasıdır. Kontekst sənədindən Kontekst haqqında əlavə məlumat ala bilərsiniz.
\nBu bölmədə göstərilən Hooklar, ya əvvəlki bölmədə göstərilən əsas Hookların fərqli variantlarıdır, ya da xüsusi kənar ssenariləri əhatə etmək üçündür. Bu Hookları indi öyrənmək vacib deyil.
\nuseReducer \n\nThis content is out of date.
\nRead the new React documentation for
\nuseReducer.
const [state, dispatch] = useReducer(reducer, initialArg, init);useState üçün alternativ. (state, action) => newState formalı reducer tipi qəbul edir, cari state və dispatch metodu qaytarır. (Redux ilə tanışlığınız varsa, bunun necə işlədiyini bilirsiniz.)
Bir neçə sub-dəyərlərdən və ya əvvəlki state-dən asılı olan mürəkkəb state məntiqi olduqda useReducer işlətmək useState işlətməkdən daha üstündür. Əlavə olaraq, callback-lər əvəzinə dispatch-i göndərməyin mümkün olduğundan useReducer ilə dərində yeniliklər edən komponentlərin performansını optimallaşdırmaq mümkündür.
Aşağıdakı nümunədə useState bölməsində olan sayğac nümunəsinin reducer ilə yazılmış forması göstərilir:
const initialState = {count: 0};\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return {count: state.count + 1};\n case 'decrement':\n return {count: state.count - 1};\n default:\n throw new Error();\n }\n}\n\nfunction Counter() {\n const [state, dispatch] = useReducer(reducer, initialState);\n return (\n <>\n Say: {state.count}\n <button onClick={() => dispatch({type: 'decrement'})}>-</button>\n <button onClick={() => dispatch({type: 'increment'})}>+</button>\n </>\n );\n}\n\nQeyd
\nReact,
\ndispatchfunksiyasının identikliyinin stabil olmasını və render etmələr arasında dəyişmədiyini siğortalayır. Bu səbəbdən, bu funksiyanıuseEffectvə yauseCallbackHooklarının asılılıq siyahısına əlavə etmək lazım deyil.
useReducer state-ini iki formada inisializasiya etmək mümkündür. Ssenaridən asılı olaraq istənilən formadan istifadə edə bilərsiniz. Ən sadə yol ilkin state-i ikinci arqument kimi göndərməkdir:
const [state, dispatch] = useReducer(\n reducer,\n {count: initialCount} );\n\nQeyd
\nReact, Redux ilə populyarlaşan
\nstate = initialStatearqument konvensiyasından istifadə etmir. İlkin dəyərin proplardan asılı ola bildiyindən bu dəyər Hook çağırışından təyin edilir. Əgər Redux-ın davranışını təqlid etmək istəyirsinizsə,useReducer(reducer, undefined, reducer)çağıra bilərsiniz. Lakin, biz bunu tövsiyə etmirik.
Əlavə olaraq, ilkin state-i lazy formada yarada bilərsiniz. Bunun üçün init funksiyasını üçüncü arqumentə göndərin. İlkin state init(initialArg)-a bərabər olacaq.
Bu funksiya ilə ilkin state-i reducer-dən kənara ixrac etmək mümkündür. Bu, fəaliyyət (action) əsasında state-i sıfırlamaq üçün də faydalıdır:
\nfunction init(initialCount) { return {count: initialCount};}\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return {count: state.count + 1};\n case 'decrement':\n return {count: state.count - 1};\n case 'reset': return init(action.payload); default:\n throw new Error();\n }\n}\n\nfunction Counter({initialCount}) {\n const [state, dispatch] = useReducer(reducer, initialCount, init); return (\n <>\n Say: {state.count}\n <button\n onClick={() => dispatch({type: 'reset', payload: initialCount})}> Sıfırla\n </button>\n <button onClick={() => dispatch({type: 'decrement'})}>-</button>\n <button onClick={() => dispatch({type: 'increment'})}>+</button>\n </>\n );\n}Reducer Hookundan qaytarılan dəyər cari state dəyəri ilə eynidirsə, React, uşaqları render etmədən və effektləri çağırmadan bu yeniliyi atlayacaq. (React, Object.is müqayisə alqoritmindən istifadə edir.)
Nəzərə alın ki, React, dispatch-i atlamadan öncə spesifik komponenti render edə bilər. Bu davranışdan narahat olmaq lazım deyil. Çünki, React lazımsız yerə ağacın “dərinliyinə” getməyəcək. Əgər render zamanı bahalı hesablamalar edirsinizsə, bu hesablamaları useMemo Hooku ilə optimallaşdıra bilərsiniz.
useCallback \n\nThis content is out of date.
\nRead the new React documentation for
\nuseCallback.
const memoizedCallback = useCallback(\n () => {\n doSomething(a, b);\n },\n [a, b],\n);Memoizasiya olunmuş callback qaytarır.
\nEyni sətrli callback və asılılıqlar massivi göndərin. useCallback Hooku callback-in memoizasiya olunmuş versiyasını qaytarır və bu callback yalnız asılılıqlar dəyişdikdə yenilənir. Bu Hook, uşaq komponentlərdə referans bərabərliyi əsasında render etmələrin qarşısını almaq üçün (məsələn, shouldComponentUpdate) faydalıdır.
useCallback(fn, deps) funksiyası useMemo(() => fn, deps) funksiyasına bərabərdir.
\n\nQeyd
\nAsılılıqlar massivi funksiyaya arqument kimi göndərilmir. Lakin, konseptual olaraq bu asılılıqlar effektdə işlədilən dəyərləri təmsil edirlər. Bu səbəbdən funksiyada olan hər bir dəyər asılılıqlar massivində də olmalıdır. Gələcəkdə, bu massiv daha təkmilləşmiş kompilyator ilə avtomatik təyin edilə bilər.
\nBiz,
\neslint-plugin-react-hookspaketininexhaustive-depsqaydasından istifadə etməyi tövsiyə edirik. Bu qayda, səhv təyin edilən asılılıqları göstərir və düzəliş təklif edir.
useMemo \n\nThis content is out of date.
\nRead the new React documentation for
\nuseMemo.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);Memoizasiya olunan dəyər qaytarır.
\n“Yaranma” funksiyası və asılılıqlar massivi göndərin. useMemo Hooku memoizasiya olunan dəyəri yalnız asılılıqlar dəyişdikdə yenidən hesablayır. Bu optimallaşdırma hər render etmə zamanı lazımsız bahalı hesablamaları atlamaq üçün faydalıdır.
useMemo-ya göndərilən funksiyanın render zamanı çağrıldığını unutmayın. Normalda render zamanı etmədiyiniz əməliyyatları burada da etməyin. Məsələn, yan effektlər useMemo-da yox useEffect-də icra olunmalıdır.
Asılılıq massivi göndərilmədikdə hər render etmə zamanı yeni dəyər hesablanacaq.
\nuseMemo Hookuna semantik siğorta kimi yox performans optimallaşdırması kimi baxın. Gələcəkdə, React bəzi əvvəlki memoizasiya olunan dəyəri “unudub” sonrakı renderdə bu dəyəri yenidən hesablaya bilər (məsələn, ekrandan görünməyən komponentləri yaddaşdan silərək). Bu səbəbdən, həmişə kodu elə yazın ki, useMemo-suz da işləsin. Sonra, performansı optimallaşdırmaq üçün bu Hooku əlavə edin.
\n\nQeyd
\nAsılılıqlar massivi funksiyaya arqument kimi göndərilmir. Lakin, konseptual olaraq bu asılılıqlar effektdə işlədilən dəyərləri təmsil edirlər. Bu səbəbdən funksiyada olan hər bir dəyər asılılıqlar massivində də olmalıdır. Gələcəkdə, bu massiv daha təkmilləşmiş kompilyator ilə avtomatik təyin edilə bilər.
\nBiz,
\neslint-plugin-react-hookspaketininexhaustive-depsqaydasından istifadə etməyi tövsiyə edirik. Bu qayda, səhv təyin edilən asılılıqları göstərir və düzəliş təklif edir.
useRef \n\nThis content is out of date.
\nRead the new React documentation for
\nuseRef.
const refContainer = useRef(initialValue);useRef Hooku .current parametri göndərilən arqument (initialValue) ilə inisializasiya olunan və mutasiya oluna bilən ref obyekti qaytarır. Qaytarılan obyekt komponentin ömrü boyu mövcud olacaq.
Bu Hookun çox işlədilən ssenarilərindən biri uşaq komponentdən imperativ istifadə etməkdir:
\nfunction TextInputWithFocusButton() {\n const inputEl = useRef(null);\n const onButtonClick = () => {\n // `current` dəyəri mount olunuş mətn anket sahəsi elementinə referens edir\n inputEl.current.focus();\n };\n return (\n <>\n <input ref={inputEl} type=\"text\" />\n <button onClick={onButtonClick}>Anket sahəsini fokusla</button>\n </>\n );\n}Mahiyyətcə useRef Hooku, .current parametrində mutasiya oluna bilən dəyər saxlayan “qutudur.”
Sizin ref-lər ilə DOM-dan istifadə etmək əməliyyatı ilə tanışlığınız ola bilər. Ref obyektini <div ref={myRef} /> formada React-ə göndərdikdə React bu ref obyektinin .current parametrinə müvafiq DOM nodunu təyin edəcək.
Lakin, useRef() Hooku yalnız ref attributu üçün faydalı deyil. Bu Hook ilə siniflərdə olan instansiya sahələri kimi dəyişə bilən dəyəri saxlamaq mümkündür.
Bunun işləməsinin səbəbi useRef() Hookunun sadə JavaScript obyekti yaratmasıdır. useRef() işlətmək ilə {current: ...} obyektini yaratmağın əsas fərqi useRef-in render etmələr arası eyni obyekti qaytarmasıdır.
useRef-in dəyəri dəyişdikdə heç bir bildirişin edilmədiyini unutmayın. .current parametrini dəyişdikdə yenidən render etmə baş vermir. React-in DOM noduna ref əlavə etməsi və ya silməsi üçün callback ref-indən istifadə edə bilərsiniz.
useImperativeHandle \n\nThis content is out of date.
\nRead the new React documentation for
\nuseImperativeHandle.
useImperativeHandle(ref, createHandle, [deps])useImperativeHandle Hooku valideyn komponentdə olan ref-i özəlləşdirmək üçün faydalıdır. Həmişə dediyimiz kimi ref-lər ilə imperativ kod yazmaqdan çəkinin. useImperativeHandle Hookunu forwardRef ilə işlətməyi tövsiyə edirik:
function FancyInput(props, ref) {\n const inputRef = useRef();\n useImperativeHandle(ref, () => ({\n focus: () => {\n inputRef.current.focus();\n }\n }));\n return <input ref={inputRef} ... />;\n}\nFancyInput = forwardRef(FancyInput);Yuxarıdakı nümunədə <FancyInput ref={inputRef} /> komponentini render edən valideyn komponenti inputRef.current.focus() funksiyasını çağıra biləcək.
useLayoutEffect \n\nThis content is out of date.
\nRead the new React documentation for
\nuseLayoutEffect.
Bu funksiyanın imzasının useEffect ilə eyni olduğuna baxmayaraq bu Hook bütün DOM mutasiyalarından sonra sinxron icra edilir. Bu funksiyanı DOM-dan şablonu oxumaq və sinxron yenidən render etmək üçün istifadə edin. useLayoutEffect ilə planlaşdırılan yeniliklər brauzer rəngləməsindən öncə icra edilərək.
Vizual yenilikləri blok etməmək üçün standart useEffect Hookundan istifadə edin.
\n\nMəsləhət
\nSinif komponent kodunu Hooklara miqrasiya edirsinizsə,
\nuseLayoutEffect-incomponentDidMountvəcomponentDidUpdatemetodlar ilə eyni fazada icra edildiyini nəzərə alın. Lakin, bizuseEffectilə başlamağı və problem yarandıqdauseLayoutEffectişlətməyi tövsiyə edirik.Serverdə render edildikdə JavaScript yüklənənə kimi nə
\nuseLayoutEffectnə dəuseEffecticra oluna bilər. Bu səbəbdən, server ilə render edilən komponentdəuseLayoutEffectolduqda React xəbərdarlıq göstərir. Bunu həll etmək üçün ya məntiqiuseEffectHookuna köçürün (əgər effekt ilk render zamanı vacib deyilsə) ya da komponenti klient render edənə kimi gecikdirin (əgəruseLayoutEffectçağrılana kimi HTML sınmış göstərilirsə).Server tərəfindən render edildiyi zaman şablon effekti işlədən komponenti render etməmək üçün komponenti
\nshowChild && <Child />formada şərti render edin və komponenti göstərməyiuseEffect(() => { setShowChild(true); }, [])formada təxirə salın. Bu yol ilə komponent hidrasiya olunmamışdan öncə sınıq görünməyəcək.
useDebugValue \n\nThis content is out of date.
\nRead the new React documentation for
\nuseDebugValue.
useDebugValue(value)React DevTools-da xüsusi Hooklar üçün etiket göstərmək üçün useDebugValue Hookundan istifadə edə bilərsiniz.
Məsələn, “Xüsusi Hookların Yaradılması” səhifəsində olan useFriendStatus Hookuna baxaq:
function useFriendStatus(friendID) {\n const [isOnline, setIsOnline] = useState(null);\n\n // ...\n\n // DevTools-da bu Hookun yanında etiket göstərin // e.g. \"FriendStatus: Online\" useDebugValue(isOnline ? '̄Online' : 'Offline');\n return isOnline;\n}\n\nMəsləhət
\nHər xüsusi Hooka debaq dəyəri əlavə etməyi tövsiyə etmirik. Bu funksiya ən çox paylaşılan kitabxanaların xüsusi Hookları üçün faydalıdır.
\n
Bəzi hallarda, göstəriləcək dəyəri format etmək bahalı əməliyyat ola bilər. Əlavə olaraq, xüsusi Hook, DevTools-dan yoxlanmayana kimi bu dəyəri hesablamaq mənasız ola bilər.
\nBu səbəbdən, useDebugValue Hooku format funksiyasını fakultativ arqument kimi qəbul edir. Bu funksiya yalnız Hooklar yoxlandıqda çağrılır. Bu funksiya debaq dəyərini arqument kimi qəbul edir və format olunmuş dəyəri qaytarır.
Məsələn, Date dəyəri qaytaran xüsusi Hookdan toDateString funksiyasını lazımsız yerə çağırmamaq üçün aşağıdakı formatlayıcı funksiyadan istifadə etmək mümkündür:
useDebugValue(date, date => date.toDateString());useDeferredValue \n\nThis content is out of date.
\nRead the new React documentation for
\nuseDeferredValue.
const deferredValue = useDeferredValue(value);useDeferredValue accepts a value and returns a new copy of the value that will defer to more urgent updates. If the current render is the result of an urgent update, like user input, React will return the previous value and then render the new value after the urgent render has completed.
This hook is similar to user-space hooks which use debouncing or throttling to defer updates. The benefits to using useDeferredValue is that React will work on the update as soon as other work finishes (instead of waiting for an arbitrary amount of time), and like startTransition, deferred values can suspend without triggering an unexpected fallback for existing content.
useDeferredValue only defers the value that you pass to it. If you want to prevent a child component from re-rendering during an urgent update, you must also memoize that component with React.memo or React.useMemo:
function Typeahead() {\n const query = useSearchQuery('');\n const deferredQuery = useDeferredValue(query);\n\n // Memoizing tells React to only re-render when deferredQuery changes,\n // not when query changes.\n const suggestions = useMemo(() =>\n <SearchSuggestions query={deferredQuery} />,\n [deferredQuery]\n );\n\n return (\n <>\n <SearchInput query={query} />\n <Suspense fallback=\"Loading results...\">\n {suggestions}\n </Suspense>\n </>\n );\n}Memoizing the children tells React that it only needs to re-render them when deferredQuery changes and not when query changes. This caveat is not unique to useDeferredValue, and it’s the same pattern you would use with similar hooks that use debouncing or throttling.
useTransition \n\nThis content is out of date.
\nRead the new React documentation for
\nuseTransition.
const [isPending, startTransition] = useTransition();Returns a stateful value for the pending state of the transition, and a function to start it.
\nstartTransition lets you mark updates in the provided callback as transitions:
startTransition(() => {\n setCount(count + 1);\n});isPending indicates when a transition is active to show a pending state:
function App() {\n const [isPending, startTransition] = useTransition();\n const [count, setCount] = useState(0);\n \n function handleClick() {\n startTransition(() => {\n setCount(c => c + 1);\n });\n }\n\n return (\n <div>\n {isPending && <Spinner />}\n <button onClick={handleClick}>{count}</button>\n </div>\n );\n}\n\nNote:
\nUpdates in a transition yield to more urgent updates such as clicks.
\nUpdates in a transition will not show a fallback for re-suspended content. This allows the user to continue interacting with the current content while rendering the update.
\n
useId \n\nThis content is out of date.
\nRead the new React documentation for
\nuseId.
const id = useId();useId is a hook for generating unique IDs that are stable across the server and client, while avoiding hydration mismatches.
\n\nNote
\n\n
useIdis not for generating keys in a list. Keys should be generated from your data.
For a basic example, pass the id directly to the elements that need it:
function Checkbox() {\n const id = useId();\n return (\n <>\n <label htmlFor={id}>Do you like React?</label>\n <input id={id} type=\"checkbox\" name=\"react\"/>\n </>\n );\n};For multiple IDs in the same component, append a suffix using the same id:
function NameFields() {\n const id = useId();\n return (\n <div>\n <label htmlFor={id + '-firstName'}>First Name</label>\n <div>\n <input id={id + '-firstName'} type=\"text\" />\n </div>\n <label htmlFor={id + '-lastName'}>Last Name</label>\n <div>\n <input id={id + '-lastName'} type=\"text\" />\n </div>\n </div>\n );\n}\n\nNote:
\n\n
useIdgenerates a string that includes the:token. This helps ensure that the token is unique, but is not supported in CSS selectors or APIs likequerySelectorAll.\n
useIdsupports anidentifierPrefixto prevent collisions in multi-root apps. To configure, see the options forhydrateRootandReactDOMServer.
The following Hooks are provided for library authors to integrate libraries deeply into the React model, and are not typically used in application code.
\nuseSyncExternalStore \n\nThis content is out of date.
\nRead the new React documentation for
\nuseSyncExternalStore.
const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);useSyncExternalStore is a hook recommended for reading and subscribing from external data sources in a way that’s compatible with concurrent rendering features like selective hydration and time slicing.
This method returns the value of the store and accepts three arguments:
\nsubscribe: function to register a callback that is called whenever the store changes.getSnapshot: function that returns the current value of the store.getServerSnapshot: function that returns the snapshot used during server rendering.The most basic example simply subscribes to the entire store:
\nconst state = useSyncExternalStore(store.subscribe, store.getSnapshot);However, you can also subscribe to a specific field:
\nconst selectedField = useSyncExternalStore(\n store.subscribe,\n () => store.getSnapshot().selectedField,\n);When server rendering, you must serialize the store value used on the server, and provide it to useSyncExternalStore. React will use this snapshot during hydration to prevent server mismatches:
const selectedField = useSyncExternalStore(\n store.subscribe,\n () => store.getSnapshot().selectedField,\n () => INITIAL_SERVER_SNAPSHOT.selectedField,\n);\n\nNote:
\n\n
getSnapshotmust return a cached value. If getSnapshot is called multiple times in a row, it must return the same exact value unless there was a store update in between.A shim is provided for supporting multiple React versions published as
\nuse-sync-external-store/shim. This shim will preferuseSyncExternalStorewhen available, and fallback to a user-space implementation when it’s not.As a convenience, we also provide a version of the API with automatic support for memoizing the result of getSnapshot published as
\nuse-sync-external-store/with-selector.
useInsertionEffect \n\nThis content is out of date.
\nRead the new React documentation for
\nuseInsertionEffect.
useInsertionEffect(didUpdate);The signature is identical to useEffect, but it fires synchronously before all DOM mutations. Use this to inject styles into the DOM before reading layout in useLayoutEffect. Since this hook is limited in scope, this hook does not have access to refs and cannot schedule updates.
\n","frontmatter":{"title":"Hookların API Arayışı","next":"hooks-faq.html","prev":"hooks-custom.html"},"fields":{"path":"content/docs/hooks-reference.md","slug":"docs/hooks-reference.html"}}},"pageContext":{"slug":"docs/hooks-reference.html"}},"staticQueryHashes":[]}Note:
\n\n
useInsertionEffectshould be limited to css-in-js library authors. PreferuseEffectoruseLayoutEffectinstead.