هوک use در ریکت

هوک use به شما اجازه میدهد که مقدار ریسورسهایی مانند context یا پرامیس را بخوانید و در کامپوننت استفاده کنید.

هوک use، هم اکنون (سوم آذر ۱۴۰۲) برای نسخه های پایدار ریکت موجود نیست. برای استفاده از این هوک ، باید نسخه های canary ریکت را استفاده کنید:

npm i react@18.3.0-canary-fbc9b68d6-20231123 react-dom@18.3.0-canary-fbc9b68d6-20231123

استفاده از این نسخه ریکت، در پروداکشن توصیه نمیشود.

استفاده برای context:

به مثال زیر توجه کنید:

import { useState } from 'react';
import { createContext } from 'react';
import { useContext } from 'react';

const DarkMode = createContext(false);
    
function App() {
   const [isDarkMode,setDarkMode] = useState(false);
   return (<>
      <DarkMode.Provider value={{isDarkMode,setDarkMode}}>
         <MyPage />
      </DarkMode.Provider>
   </>);
}

برای استفاده از مقدار darkMode، در هر کامپوننت میتوانیم مانند مثال زیر از هوک useContext استفاده کنیم:

function MyComponent(){
    const {isDarkMode,setDarkMode} = useContext(DarkMode);
    return (<div>
        <div
        style={{width:'200px',height:'200px',background:isDarkMode?'black':'red'}}>
        </div> 
        <button onClick={()=>setDarkMode(!isDarkMode)}>Toggle DarkMode</button>
    </div>);
}

خواندن مقدار کانتکست را با هوک use نیز میتوانیم انجام دهیم:

import {use} from "react";

function MyComponent(){
    const {isDarkMode,setDarkMode} = use(DarkMode);
    return (<div>
        <div 
        style={{width:'200px',height:'200px',background:isDarkMode?'black':'red'}}>
        </div> 
        <button onClick={()=>setDarkMode(!isDarkMode)}>Toggle DarkMode</button>
    </div>);
}

هوک use، برخلاف سایر هوک ها میتواند در شرط های مانند if و حلقه هایی مانند for صدا زده شود. به مثال زیر دقت کنید‌:

function MyComponent({isLogin}){
    if(isLogin){
       const {isDarkMode,setDarkMode} = use(DarkMode);
       return (<div>
            <div 
            style={{width:'200px',height:'200px',background:isDarkMode?'black':'red'}}>
            </div>                      
           <button onClick={()=>setDarkMode(!isDarkMode)}>Toggle DarkMode</button>
       </div>); 
    }else{
       ...
    }
}    

هوک use برای پرامیس

برای بارگیری دیتا در کلاینت کامپوننتها، میتوانیم مانند نمونه عمل کنیم :

const fetchTodos = async ()=>{
    const todos = await fetch('https://jsonplaceholder.typicode.com/todos');
    const data = await todos.json();
    return data;
}
 
function Todos(){
    const [todos,setTodos] = useState(null);
    useEffect(()=>{
       fetchTodos().then(data=>setTodos(data));
    },[]);
 
    if(!todos){
       return <p>loading ...</p>
    }
    return (<ul>
       {todos.map((todo)=>(<li key={todo.id}>{todo.title}</li>))}
    </ul>);
}

در نمونه کد بالا موقعی که todo list از سرور لود شود، مقدار todos در قالب یک لیست برای کاربر نمایش داده خواهد شد. با استفاده از هوک use میتوان همین کار را انجام داد:

import { Suspense } from 'react';
import { use } from 'react';

const fetchTodos = async ()=>{
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const todos = await response.json();
    return todos;
}

function App() {
   return (<Suspense fallback={<p>Loading ...</p>}>
        <Todos />
   </Suspense>);
}

function Todos(){
   const todos = use(fetchTodos());
   return (<>
        {todos.map((todo)=>(<h3 key={todo.id}>{todo.title}</h3>))}
   </>);
}

در نمونه کد بالا، کامپوننت Todos با Suspense پوشانیده شده است تا وقتی که عملیات پرامیس (در این مثال فتچ لیست todo) در حال انجام است و مقداری برنگردانده است، مقدار fallback (در این مثال loading ...) بجای مقدار پرامیس نمایش داده شود. پس از اتمام فرایند پرامیس fetchTodos، مقدار بازگشتی از use در کامپوننت Todos، بجای fallback نمایش داده خواهد شد.

هندل کردن ارور پرامیس

موقع بارگیری از لیست todo ممکن است عملیات پرامیس با خطا مواجه شود یا اصطلاحا ریجکت شود. برای هندل کردن این خطا، موقع استفاده از هوک use، میتوانیم از react-error-boundary استفاده کنیم:

npm i react-error-boundary

سپس کامپوننت Todos را با ErrorBoundary میپوشانیم:

import { Suspense } from 'react'; 
import { use } from 'react';

const fetchTodos = async ()=>{
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const todos = await response.json(); 
    return todos; 
}
    
function App() { 
    return (<ErrorBoundary fallback={<p>Something went wrong</p>}>
        <Suspense fallback={<p>Loading ...</p>}>
            <Todos />
        </Suspense>
    </ErrorBoundary>); 
}
    
function Todos(){ 
    const todos = use(fetchTodos());
    return (<>
        {todos.map((todo)=>(<h3 key={todo.id}>{todo.title}</h3>))}
    </>); 
}

در این حالت مواقعی که پرامیس مربوط به use دچار خطا شود، fallback مربوط به ErrorBoundary بجای کامپوننت Todos نمایش داده خواهد شد.