React के आम Design Patterns

React design patterns well-known dance moves जैसे हैं — एक बार आप इन्हें पहचान लें, आप किसी भी routine में follow along कर सकते हैं, और दूसरे dancers instantly समझ जाते हैं कि आप क्या कर रहे हैं।

In this page:

Named Patterns क्यों सीखें
Modern React Hooks को पुराने Patterns से ज़्यादा Favor करता है
Simplest Pattern चुनना जो Fit हो

Named Patterns क्यों सीखें

Common code shapes को नाम देना (जैसे 'compound components' या 'render props') developers को design ideas जल्दी communicate करने देता है, और unfamiliar codebases में familiar structures को तेज़ी से पहचानने देता है, हर बार scratch से फिर से derive करने के बजाय कि कुछ कैसे काम करता है।

Note: यह course हर major pattern को अपने dedicated tutorial में cover करता है — यह एक focus करता है कि कब और क्यों कौन सा pattern reach करें।

Warning: एक pattern का नाम जानना अपने आप में goal नहीं है — goal यह पहचानना है कि यह असल में कौन सा real problem solve करता है।

उदाहरण: Why Learn Named Patterns

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
// Recognizing the shape:
function useToggle(initial) {
  const [value, setValue] = React.useState(initial);
  return [value, () => setValue(v => !v)];
}
// "Oh, this is the custom hook pattern for shared stateful logic"
function App() {
  const [isOn] = useToggle(false);
  return <p>{isOn ? "On" : "Off"}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

Modern React Hooks को पुराने Patterns से ज़्यादा Favor करता है

Render props और higher-order components जैसे patterns Hooks के exist होने से पहले components के बीच logic share करने का primary तरीका थे। आज, एक custom hook आमतौर पर कम nesting और clearer code के साथ वही goal accomplish करता है, इसलिए hooks generally नए code में reach करने के लिए first tool हैं।

Note: जब आप किसी older codebase में एक render-props या HOC pattern देखें, यह अक्सर इसे एक equivalent custom hook में refactor करने के लिए एक अच्छा candidate है।

Warning: हर render-props/HOC usage को immediately rewrite करने की ज़रूरत नहीं है — opportunistically refactor करें, एक disruptive, all-at-once rewrite के रूप में नहीं।

उदाहरण: Modern React Favors Hooks Over Older Patterns

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
// Older pattern (HOC):
function withCounter(Wrapped) {
  return function(props) {
    const [count, setCount] = React.useState(0);
    return <Wrapped {...props} count={count} increment={() => setCount(count + 1)} />;
  };
}
// Modern equivalent (custom hook) is usually preferred for new code:
function useCounter() {
  const [count, setCount] = React.useState(0);
  return { count, increment: () => setCount(c => c + 1) };
}
ReactDOM.createRoot(document.getElementById('root')).render(<p>See dedicated pattern tutorials for full examples</p>);
  </script>
</body>
</html>

Simplest Pattern चुनना जो Fit हो

हर pattern कुछ simplicity को कुछ flexibility या reusability के लिए trade करता है। एक complex pattern (जैसे compound components) को एक problem पर apply करना जिसे सिर्फ एक straightforward implementation की ज़रूरत है unnecessary abstraction जोड़ता है — इसे तब के लिए save करें जब flexibility actually ज़रूरी हो।

Note: एक advanced pattern reach करने से पहले एक अच्छा question: 'क्या यह actually reuse या vary होगा, या मैं सिर्फ एक need anticipate कर रहा हूं जो शायद कभी न आए'?

Warning: Premature abstraction (एक flexible, pattern-based solution build करना एक problem के लिए जिसे इसकी ज़रूरत अभी नहीं) अक्सर code को समझना एक simple, direct implementation से ज़्यादा hard बना देता है।

उदाहरण: Choosing the Simplest Pattern That Fits

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
// Simple, direct — fine if this is genuinely a one-off:
function SubmitButton() {
  return <button type="submit">Submit</button>;
}
// Only reach for a more elaborate pattern (compound components, render props)
// once you actually need multiple, meaningfully different variations.
ReactDOM.createRoot(document.getElementById('root')).render(<SubmitButton />);
  </script>
</body>
</html>

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson Scalable Folder Architecture Next Lesson → Component Documentation with Storybook

React के आम Design Patterns

Named Patterns क्यों सीखें

Modern React Hooks को पुराने Patterns से ज़्यादा Favor करता है

Simplest Pattern चुनना जो Fit हो

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code