स्टेट मैनेजमेंट के लिए एडवांस्ड रिएक्ट कॉन्टेक्स्ट एपीआई पैटर्न

रिएक्ट कॉन्टेक्स्ट एपीआई आपके एप्लिकेशन में प्रॉप ड्रिलिंग के बिना स्टेट साझा करने के लिए एक शक्तिशाली तंत्र प्रदान करता है। जबकि इसका सामान्य उपयोग सीधा है, इसकी पूरी क्षमता का लाभ उठाने के लिए एडवांस्ड पैटर्न को समझना आवश्यक है जो जटिल स्टेट मैनेजमेंट परिदृश्यों को संभाल सकते हैं। यह लेख इनमें से कई पैटर्न की पड़ताल करता है, जो आपके रिएक्ट डेवलपमेंट को बेहतर बनाने के लिए व्यावहारिक उदाहरण और कार्रवाई योग्य अंतर्दृष्टि प्रदान करता है।

बेसिक कॉन्टेक्स्ट एपीआई की सीमाओं को समझना

एडवांस्ड पैटर्न में जाने से पहले, बेसिक कॉन्टेक्स्ट एपीआई की सीमाओं को स्वीकार करना महत्वपूर्ण है। जबकि यह सरल, वैश्विक रूप से सुलभ स्टेट के लिए उपयुक्त है, यह बार-बार बदलने वाले स्टेट वाले जटिल एप्लिकेशन के लिए बोझिल और अक्षम हो सकता है। कॉन्टेक्स्ट का उपयोग करने वाला प्रत्येक कंपोनेंट जब भी कॉन्टेक्स्ट वैल्यू बदलता है, तो फिर से रेंडर होता है, भले ही कंपोनेंट स्टेट के उस विशिष्ट हिस्से पर निर्भर न हो जिसे अपडेट किया गया था। इससे परफॉर्मेंस में बाधा आ सकती है।

पैटर्न 1: कॉन्टेक्स्ट के साथ कंपाउंड कंपोनेंट्स

कंपाउंड कंपोनेंट पैटर्न संबंधित कंपोनेंट्स का एक सूट बनाकर कॉन्टेक्स्ट एपीआई को बढ़ाता है जो एक कॉन्टेक्स्ट के माध्यम से अंतर्निहित रूप से स्टेट और लॉजिक साझा करते हैं। यह पैटर्न पुन: प्रयोज्यता को बढ़ावा देता है और उपभोक्ताओं के लिए एपीआई को सरल बनाता है। यह जटिल लॉजिक को सरल कार्यान्वयन के साथ समाहित करने की अनुमति देता है।

उदाहरण: एक टैब कंपोनेंट

आइए इसे एक टैब कंपोनेंट के साथ स्पष्ट करें। कई लेयर्स के माध्यम से प्रॉप्स पास करने के बजाय, Tab कंपोनेंट्स एक साझा कॉन्टेक्स्ट के माध्यम से अंतर्निहित रूप से संचार करते हैं।

// TabContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface TabContextType {
  activeTab: string;
  setActiveTab: (tab: string) => void;
}

const TabContext = createContext(undefined);

interface TabProviderProps {
  children: ReactNode;
  defaultTab: string;
}

export const TabProvider: React.FC = ({ children, defaultTab }) => {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const value: TabContextType = {
    activeTab,
    setActiveTab,
  };

  return {children};
};

export const useTabContext = () => {
  const context = useContext(TabContext);
  if (!context) {
    throw new Error('useTabContext must be used within a TabProvider');
  }
  return context;
};

// TabList.js
import React, { ReactNode } from 'react';

interface TabListProps {
  children: ReactNode;
}

export const TabList: React.FC = ({ children }) => {
  return 
{children}
;
};

// Tab.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabProps {
  label: string;
  children: ReactNode;
}

export const Tab: React.FC = ({ label, children }) => {
  const { activeTab, setActiveTab } = useTabContext();
  const isActive = activeTab === label;

  const handleClick = () => {
    setActiveTab(label);
  };

  return (
    
      {label}
    
  );
};

// TabPanel.js
import React, { ReactNode } from 'react';
import { useTabContext } from './TabContext';

interface TabPanelProps {
  label: string;
  children: ReactNode;
}

export const TabPanel: React.FC = ({ label, children }) => {
  const { activeTab } = useTabContext();
  const isActive = activeTab === label;

  return (
    
  );
};

// Usage
import { TabProvider, TabList, Tab, TabPanel } from './components/Tabs';

function App() {
  return (
    
      
        Tab 1
        Tab 2
        Tab 3
      
      Content for Tab 1
      Content for Tab 2
      Content for Tab 3
    
  );
}

export default App;

लाभ:

• उपभोक्ताओं के लिए सरल एपीआई: उपयोगकर्ताओं को केवल Tab, TabList, और TabPanel के बारे में चिंता करने की आवश्यकता है।
• अंतर्निहित स्टेट शेयरिंग: कंपोनेंट्स स्वचालित रूप से साझा स्टेट तक पहुँचते और अपडेट करते हैं।
• बेहतर पुन: प्रयोज्यता: Tab कंपोनेंट को विभिन्न संदर्भों में आसानी से पुन: उपयोग किया जा सकता है।

पैटर्न 2: डायनामिक कॉन्टेक्स्ट

कुछ परिदृश्यों में, आपको कंपोनेंट ट्री में कंपोनेंट की स्थिति या अन्य डायनामिक कारकों के आधार पर अलग-अलग कॉन्टेक्स्ट मानों की आवश्यकता हो सकती है। डायनामिक कॉन्टेक्स्ट आपको विशिष्ट स्थितियों के आधार पर भिन्न होने वाले कॉन्टेक्स्ट मान बनाने और प्रदान करने की अनुमति देते हैं।

उदाहरण: डायनामिक कॉन्टेक्स्ट के साथ थीमिंग

एक थीमिंग सिस्टम पर विचार करें जहाँ आप उपयोगकर्ता की प्राथमिकताओं या एप्लिकेशन के उस अनुभाग के आधार पर अलग-अलग थीम प्रदान करना चाहते हैं जिसमें वे हैं। हम लाइट और डार्क थीम के साथ एक सरलीकृत उदाहरण बना सकते हैं।

// ThemeContext.js
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = () => {
    setIsDarkTheme(!isDarkTheme);
  };

  const value: ThemeContextType = {
    theme,
    toggleTheme,
  };

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

// Usage
import { useTheme, ThemeProvider } from './ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    

      
This is a themed component.
      Toggle Theme
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

इस उदाहरण में, ThemeProvider गतिशील रूप से isDarkTheme स्टेट के आधार पर थीम निर्धारित करता है। useTheme हुक का उपयोग करने वाले कंपोनेंट थीम बदलने पर स्वचालित रूप से फिर से रेंडर होंगे।

पैटर्न 3: जटिल स्टेट के लिए useReducer के साथ कॉन्टेक्स्ट

जटिल स्टेट लॉजिक के प्रबंधन के लिए, कॉन्टेक्स्ट एपीआई को useReducer के साथ जोड़ना एक उत्कृष्ट दृष्टिकोण है। useReducer क्रियाओं के आधार पर स्टेट को अपडेट करने का एक संरचित तरीका प्रदान करता है, और कॉन्टेक्स्ट एपीआई आपको इस स्टेट और डिस्पैच फ़ंक्शन को अपने एप्लिकेशन में साझा करने की अनुमति देता है।

उदाहरण: एक सरल टूडू लिस्ट

// TodoContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

interface TodoContextType {
  state: TodoState;
  dispatch: React.Dispatch;
}

const initialState: TodoState = {
  todos: [],
};

const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

const TodoContext = createContext(undefined);

interface TodoProviderProps {
  children: ReactNode;
}

export const TodoProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(todoReducer, initialState);

  const value: TodoContextType = {
    state,
    dispatch,
  };

  return {children};
};

export const useTodo = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodo must be used within a TodoProvider');
  }
  return context;
};

// Usage
import { useTodo, TodoProvider } from './TodoContext';

function TodoList() {
  const { state, dispatch } = useTodo();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
           dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
           dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
        
      ))}
    
  );
}

function AddTodo() {
  const { dispatch } = useTodo();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}

function App() {
  return (
    
      
      
    
  );
}

export default App;

यह पैटर्न स्टेट मैनेजमेंट लॉजिक को रिड्यूसर के भीतर केंद्रीकृत करता है, जिससे इसके बारे में तर्क करना और परीक्षण करना आसान हो जाता है। कंपोनेंट्स सीधे स्टेट का प्रबंधन किए बिना स्टेट को अपडेट करने के लिए एक्शन भेज सकते हैं।

पैटर्न 4: `useMemo` और `useCallback` के साथ ऑप्टिमाइज़्ड कॉन्टेक्स्ट अपडेट

जैसा कि पहले बताया गया है, कॉन्टेक्स्ट एपीआई के साथ एक प्रमुख प्रदर्शन विचार अनावश्यक री-रेंडर है। useMemo और useCallback का उपयोग करके इन री-रेंडर को रोका जा सकता है, यह सुनिश्चित करके कि कॉन्टेक्स्ट वैल्यू के केवल आवश्यक हिस्से ही अपडेट किए जाते हैं, और फ़ंक्शन संदर्भ स्थिर रहते हैं।

उदाहरण: एक थीम कॉन्टेक्स्ट को ऑप्टिमाइज़ करना

// OptimizedThemeContext.js
import React, { createContext, useContext, useState, useMemo, useCallback, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
}

const defaultTheme: Theme = {
    background: 'white',
    color: 'black'
};

const darkTheme: Theme = {
    background: 'black',
    color: 'white'
};

const ThemeContext = createContext({
    theme: defaultTheme,
    toggleTheme: () => {}
});

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC = ({ children }) => {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  const theme = isDarkTheme ? darkTheme : defaultTheme;

  const toggleTheme = useCallback(() => {
    setIsDarkTheme(!isDarkTheme);
  }, [isDarkTheme]);

  const value: ThemeContextType = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]);

  return {children};
};

export const useTheme = () => {
  return useContext(ThemeContext);
};

स्पष्टीकरण:

• useCallback toggleTheme फ़ंक्शन को मेमोइज़ करता है। यह सुनिश्चित करता है कि फ़ंक्शन संदर्भ केवल तभी बदलता है जब isDarkTheme बदलता है, जिससे उन कंपोनेंट्स के अनावश्यक री-रेंडर को रोका जा सकता है जो केवल toggleTheme फ़ंक्शन पर निर्भर करते हैं।
• useMemo कॉन्टेक्स्ट वैल्यू को मेमोइज़ करता है। यह सुनिश्चित करता है कि कॉन्टेक्स्ट वैल्यू केवल तभी बदलती है जब theme या toggleTheme फ़ंक्शन बदलता है, जिससे अनावश्यक री-रेंडर को और रोका जा सकता है।

useCallback के बिना, toggleTheme फ़ंक्शन ThemeProvider के हर रेंडर पर फिर से बनाया जाएगा, जिससे value बदल जाएगी और किसी भी उपभोक्ता कंपोनेंट में री-रेंडर शुरू हो जाएगा, भले ही थीम खुद न बदली हो। useMemo यह सुनिश्चित करता है कि एक नया value केवल तभी बनाया जाता है जब उसकी निर्भरता (theme या toggleTheme) बदलती है।

पैटर्न 5: कॉन्टेक्स्ट सेलेक्टर्स

कॉन्टेक्स्ट सेलेक्टर्स कंपोनेंट्स को केवल कॉन्टेक्स्ट वैल्यू के विशिष्ट भागों की सदस्यता लेने की अनुमति देते हैं। यह अनावश्यक री-रेंडर को रोकता है जब कॉन्टेक्स्ट के अन्य भाग बदलते हैं। इसे प्राप्त करने के लिए `use-context-selector` जैसी लाइब्रेरी या कस्टम कार्यान्वयन का उपयोग किया जा सकता है।

एक कस्टम कॉन्टेक्स्ट सेलेक्टर का उपयोग करके उदाहरण

// useCustomContextSelector.js
import { useContext, useState, useRef, useEffect } from 'react';

function useCustomContextSelector(
  context: React.Context,
  selector: (value: T) => S
): S {
  const value = useContext(context);
  const [selected, setSelected] = useState(() => selector(value));
  const latestSelector = useRef(selector);
  latestSelector.current = selector;

  useEffect(() => {
    let didUnmount = false;
    let lastSelected = selected;

    const subscription = () => {
      if (didUnmount) {
        return;
      }
      const nextSelected = latestSelector.current(value);
      if (!Object.is(lastSelected, nextSelected)) {
        lastSelected = nextSelected;
        setSelected(nextSelected);
      }
    };

    // You would typically subscribe to context changes here. Since this is a simplified
    // example, we'll just call subscription immediately to initialize.
    subscription();

    return () => {
      didUnmount = true;
      // Unsubscribe from context changes here, if applicable.
    };
  }, [value]); // Re-run effect whenever the context value changes

  return selected;
}

export default useCustomContextSelector;

// ThemeContext.js (Simplified for brevity)
import React, { createContext, useState, ReactNode } from 'react';

interface Theme {
  background: string;
  color: string;
}

interface ThemeContextType {
  theme: Theme;
  setTheme: (newTheme: Theme) => void; 
}

const ThemeContext = createContext(undefined);

interface ThemeProviderProps {
  children: ReactNode;
  initialTheme: Theme;
}

export const ThemeProvider: React.FC = ({ children, initialTheme }) => {
  const [theme, setTheme] = useState(initialTheme);

  const value: ThemeContextType = {
    theme,
    setTheme
  };

  return {children};
};

export const useThemeContext = () => {
    const context = React.useContext(ThemeContext);
    if (!context) {
        throw new Error("useThemeContext must be used within a ThemeProvider");
    }
    return context;
};

export default ThemeContext;

// Usage
import useCustomContextSelector from './useCustomContextSelector';
import ThemeContext, { ThemeProvider, useThemeContext } from './ThemeContext';

function BackgroundComponent() {
  const background = useCustomContextSelector(ThemeContext, (context) => context.theme.background);
  return 
Background
;
}

function ColorComponent() {
  const color = useCustomContextSelector(ThemeContext, (context) => context.theme.color);
  return 
Color
;
}

function App() {
  const { theme, setTheme } = useThemeContext();

  const toggleTheme = () => {
    setTheme({ background: theme.background === 'white' ? 'black' : 'white', color: theme.color === 'black' ? 'white' : 'black' });
  };

  return (
    
      Toggle Theme
      
      
    
  );
}

export default App;

इस उदाहरण में, BackgroundComponent केवल तभी री-रेंडर होता है जब थीम की background प्रॉपर्टी बदलती है, और ColorComponent केवल तभी री-रेंडर होता है जब color प्रॉपर्टी बदलती है। यह अनावश्यक री-रेंडर से बचाता है जब पूरी कॉन्टेक्स्ट वैल्यू बदलती है।

पैटर्न 6: एक्शन्स को स्टेट से अलग करना

बड़े एप्लिकेशन के लिए, कॉन्टेक्स्ट वैल्यू को दो अलग-अलग कॉन्टेक्स्ट में अलग करने पर विचार करें: एक स्टेट के लिए और दूसरा एक्शन्स (डिस्पैच फ़ंक्शन) के लिए। यह कोड संगठन और परीक्षण क्षमता में सुधार कर सकता है।

उदाहरण: अलग स्टेट और एक्शन कॉन्टेक्स्ट के साथ टूडू लिस्ट

// TodoStateContext.js
import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: [],
};

const TodoStateContext = createContext(initialState);

interface TodoStateProviderProps {
  children: ReactNode;
}

export const TodoStateProvider: React.FC = ({ children }) => {
  const [state] = useReducer(todoReducer, initialState);

  return {children};
};

export const useTodoState = () => {
  return useContext(TodoStateContext);
};

// TodoActionContext.js
import React, { createContext, useContext, Dispatch, ReactNode } from 'react';

type TodoAction = 
  | { type: 'ADD_TODO'; text: string } 
  | { type: 'TOGGLE_TODO'; id: number } 
  | { type: 'DELETE_TODO'; id: number };

const TodoActionContext = createContext | undefined>(undefined);

interface TodoActionProviderProps {
    children: ReactNode;
}

export const TodoActionProvider: React.FC = ({children}) => {
    const [, dispatch] = useReducer(todoReducer, initialState);

    return {children};
};


export const useTodoDispatch = () => {
  const dispatch = useContext(TodoActionContext);
  if (!dispatch) {
    throw new Error('useTodoDispatch must be used within a TodoActionProvider');
  }
  return dispatch;
};

// todoReducer.js
export const todoReducer = (state: TodoState, action: TodoAction): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.id),
      };
    default:
      return state;
  }
};

// Usage
import { useTodoState, TodoStateProvider } from './TodoStateContext';
import { useTodoDispatch, TodoActionProvider } from './TodoActionContext';

function TodoList() {
  const state = useTodoState();

  return (
    

      {state.todos.map((todo) => (
        

          
            {todo.text}
          
          
        
      ))}
    
  );
}

function TodoActions({ todo }) {
  const dispatch = useTodoDispatch();

  return (
    <>
       dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>Toggle
       dispatch({ type: 'DELETE_TODO', id: todo.id })}>Delete
    
  );
}

function AddTodo() {
  const dispatch = useTodoDispatch();
  const [text, setText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: 'ADD_TODO', text });
    setText('');
  };

  return (
    

       setText(e.target.value)} />
      Add Todo
    
  );
}


function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

यह अलगाव कंपोनेंट्स को केवल उस कॉन्टेक्स्ट की सदस्यता लेने की अनुमति देता है जिसकी उन्हें आवश्यकता है, जिससे अनावश्यक री-रेंडर कम हो जाते हैं। यह रिड्यूसर और प्रत्येक कंपोनेंट का अलग-अलग यूनिट टेस्ट करना भी आसान बनाता है। साथ ही, प्रोवाइडर रैपिंग का क्रम मायने रखता है। ActionProvider को StateProvider को रैप करना होगा।

सर्वोत्तम अभ्यास और विचार

• कॉन्टेक्स्ट को सभी स्टेट मैनेजमेंट लाइब्रेरियों को प्रतिस्थापित नहीं करना चाहिए: बहुत बड़े और जटिल एप्लिकेशन के लिए, रेडक्स या ज़स्टैंड जैसी समर्पित स्टेट मैनेजमेंट लाइब्रेरी अभी भी एक बेहतर विकल्प हो सकती हैं।
• अति-प्रासंगिकता से बचें: हर स्टेट को कॉन्टेक्स्ट में रखने की आवश्यकता नहीं है। वास्तव में वैश्विक या व्यापक रूप से साझा किए गए स्टेट के लिए विवेकपूर्ण तरीके से कॉन्टेक्स्ट का उपयोग करें।
• प्रदर्शन परीक्षण: हमेशा अपने कॉन्टेक्स्ट उपयोग के प्रदर्शन प्रभाव को मापें, खासकर जब बार-बार अपडेट होने वाले स्टेट से निपट रहे हों।
• कोड स्प्लिटिंग: कॉन्टेक्स्ट एपीआई का उपयोग करते समय, अपने एप्लिकेशन को छोटे-छोटे हिस्सों में कोड-स्प्लिट करने पर विचार करें। यह विशेष रूप से तब महत्वपूर्ण है जब स्टेट में एक छोटा सा बदलाव एप्लिकेशन के एक बड़े हिस्से को फिर से रेंडर करने का कारण बनता है।

निष्कर्ष

रिएक्ट कॉन्टेक्स्ट एपीआई स्टेट मैनेजमेंट के लिए एक बहुमुखी उपकरण है। इन एडवांस्ड पैटर्न को समझकर और लागू करके, आप जटिल स्टेट को प्रभावी ढंग से प्रबंधित कर सकते हैं, प्रदर्शन को अनुकूलित कर सकते हैं, और अधिक रखरखाव योग्य और स्केलेबल रिएक्ट एप्लिकेशन बना सकते हैं। अपनी विशिष्ट आवश्यकताओं के लिए सही पैटर्न चुनना और अपने कॉन्टेक्स्ट उपयोग के प्रदर्शन निहितार्थों पर सावधानीपूर्वक विचार करना याद रखें।

जैसे-जैसे रिएक्ट विकसित होता है, वैसे-वैसे कॉन्टेक्स्ट एपीआई के आसपास की सर्वोत्तम प्रथाएं भी विकसित होंगी। नई तकनीकों और लाइब्रेरियों के बारे में सूचित रहने से यह सुनिश्चित होगा कि आप आधुनिक वेब विकास की स्टेट मैनेजमेंट चुनौतियों से निपटने के लिए सुसज्जित हैं। और भी अधिक बारीक प्रतिक्रियाशीलता के लिए सिग्नल के साथ कॉन्टेक्स्ट का उपयोग करने जैसे उभरते पैटर्न का पता लगाने पर विचार करें।