React Context कार्यक्षमते: प्रदाता अनुकूलन तंत्र

React Context हे तुमच्या React ॲप्लिकेशन्समध्ये ग्लोबल स्टेट व्यवस्थापित करण्यासाठी एक शक्तिशाली वैशिष्ट्य आहे. हे तुम्हाला प्रत्येक स्तरावर व्यक्तिचलितपणे प्रॉप्स पास न करता तुमच्या घटक ट्रीमध्ये डेटा शेअर करण्यास अनुमती देते. सोयीस्कर असले तरी, Context चा अयोग्य वापर कार्यक्षमतेत अडथळे आणू शकतो, विशेषत: जेव्हा Context प्रदाता वारंवार री-रेंडर करतो. हा ब्लॉग पोस्ट React Context कार्यक्षमतेच्या गुंतागुंतीचा शोध घेतो आणि विविध अनुकूलन तंत्रांचा शोध घेतो जेणेकरून तुमचे ॲप्लिकेशन्स कार्यक्षम आणि प्रतिसाद देणारे राहतील, अगदी जटिल स्टेट व्यवस्थापनासह.

Context च्या कार्यक्षमतेच्या परिणामांचे आकलन

मुख्य समस्या React Context अपडेट्स कसे हाताळते यातून उद्भवते. जेव्हा Context प्रदात्याने दिलेले मूल्य बदलते, तेव्हा त्या Context ट्रीमधील सर्व ग्राहक री-रेंडर करतात. हे समस्याप्रधान होऊ शकते जर कॉन्टेक्स्ट व्हॅल्यू वारंवार बदलत असेल, ज्यामुळे ज्या घटकांना डेटाची आवश्यकता नाही त्यांचे अनावश्यक री-रेंडरिंग होते. याचे कारण असे आहे की React कॉन्टेक्स्ट व्हॅल्यूवर आपोआप उथळ तुलना करत नाही हे निर्धारित करण्यासाठी की री-रेंडर आवश्यक आहे की नाही. ते पुरवलेल्या मूल्यामध्ये कोणताही बदल ग्राहकांना अपडेट करण्याचा सिग्नल म्हणून मानते.

असा विचार करा की तुमच्याकडे वापरकर्त्याचा प्रमाणीकरण डेटा पुरवणारा Context आहे. जर कॉन्टेक्स्ट व्हॅल्यूमध्ये वापरकर्त्याच्या प्रोफाइलचे प्रतिनिधित्व करणारा ऑब्जेक्ट समाविष्ट असेल, आणि तो ऑब्जेक्ट प्रत्येक रेंडरवर पुन्हा तयार केला जातो (जरी अंतर्निहित डेटा बदलला नसेल तरीही), तरीही तो कॉन्टेक्स्ट वापरणारा प्रत्येक घटक विनाकारण री-रेंडर करेल. याचा कार्यक्षमतेवर महत्त्वपूर्ण परिणाम होऊ शकतो, विशेषत: अनेक घटक आणि वारंवार स्टेट अपडेट्स असलेल्या मोठ्या ॲप्लिकेशन्समध्ये. हे कार्यक्षमतेचे (performance) इश्यू विशेषतः उच्च-ट्रॅफिक ॲप्लिकेशन्समध्ये लक्षात येतात, जे जगभरात वापरले जातात, जिथे लहान-मोठ्या त्रुटींमुळे विविध प्रदेशांमध्ये आणि उपकरणांवर वापरकर्त्याच्या अनुभवात घट होऊ शकते.

कार्यक्षमतेच्या समस्यांची सामान्य कारणे

• वारंवार व्हॅल्यू अपडेट्स: सर्वात सामान्य कारण म्हणजे प्रदात्याचे मूल्य अनावश्यकपणे बदलणे. हे सहसा तेव्हा घडते जेव्हा व्हॅल्यू एक नवीन ऑब्जेक्ट असते किंवा प्रत्येक रेंडरवर तयार केलेले फंक्शन असते, किंवा जेव्हा डेटा स्त्रोत वारंवार अपडेट होतो.
• मोठे Context व्हॅल्यू: Context द्वारे मोठ्या, जटिल डेटा स्ट्रक्चर्स पुरवणे री-रेंडर कमी करू शकते. React ला डेटा अपडेट करणे आवश्यक आहे की नाही हे निर्धारित करण्यासाठी डेटा ट्रॅव्हर्स (traverse) आणि तुलना (compare) करणे आवश्यक आहे.
• अयोग्य घटक रचना: री-रेंडरसाठी अनुकूलित नसलेले घटक (उदा., `React.memo` किंवा `useMemo` गहाळ) कार्यक्षमतेच्या समस्या वाढवू शकतात.

प्रदाता अनुकूलन तंत्र

तुमच्या Context प्रदात्यांना ऑप्टिमाइझ (optimize) करण्यासाठी आणि कार्यक्षमतेतील अडथळे कमी करण्यासाठी अनेक रणनीती पाहूया:

1. `useMemo` आणि `useCallback` सह मेमोरायझेशन (Memoization)

सर्वात प्रभावी रणनीतींपैकी एक म्हणजे `useMemo` हुक वापरून कॉन्टेक्स्ट व्हॅल्यू मेमोराइझ करणे. हे तुम्हाला प्रदात्याचे मूल्य त्याच्या अवलंबनाशिवाय बदलण्यापासून प्रतिबंधित करते. जर अवलंबित्व (dependencies) समान राहिले, तर कॅश्ड व्हॅल्यूचा पुनर्वापर केला जातो, ज्यामुळे अनावश्यक री-रेंडरिंग टाळता येते. कॉन्टेक्स्टमध्ये (context) प्रदान करण्यासाठी असलेल्या फंक्शन्ससाठी, `useCallback` हुक वापरा. यामुळे त्याचे अवलंबित्व (dependencies) बदलले नसल्यास फंक्शन प्रत्येक रेंडरवर पुन्हा तयार होण्यापासून प्रतिबंधित करते.

उदाहरण:

            import React, { createContext, useState, useMemo, useCallback } from 'react';

const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  const login = useCallback((userData) => {
    // Perform login logic
    setUser(userData);
  }, []);

  const logout = useCallback(() => {
    // Perform logout logic
    setUser(null);
  }, []);

  const value = useMemo(
    () => ({
      user,
      login,
      logout,
    }),
    [user, login, logout]
  );

  return (
    
      {children}
    
  );
}

export { UserContext, UserProvider };

            

              
                Copy
              
            
          

या उदाहरणामध्ये, `value` ऑब्जेक्ट `useMemo` वापरून मेमोराइझ केले जाते. `login` आणि `logout` फंक्शन्स `useCallback` वापरून मेमोराइझ केले जातात. `value` ऑब्जेक्ट फक्त तेव्हाच पुन्हा तयार केले जाईल जेव्हा `user`, `login` किंवा `logout` बदलतील. `login` आणि `logout` कॉलबॅक फक्त तेव्हाच पुन्हा तयार केले जातील जेव्हा त्यांची अवलंबित्व (`setUser`) बदलेल, जे फारसे संभव नाही. हा दृष्टीकोन `UserContext` वापरणाऱ्या घटकांचे री-रेंडर कमी करतो.

2. प्रदात्याला ग्राहकांपासून वेगळे करणे

जर कॉन्टेक्स्ट व्हॅल्यू फक्त वापरकर्ता स्टेट बदलल्यावर अपडेट करणे आवश्यक असेल (उदा., लॉगिन/लॉगआउट इव्हेंट्स), तर तुम्ही कॉन्टेक्स्ट व्हॅल्यू अपडेट करणारा घटक घटक ट्रीमध्ये (tree) आणखी वर हलवू शकता, एंट्री पॉइंटच्या जवळ. हे कॉन्टेक्स्ट व्हॅल्यू अपडेट झाल्यावर री-रेंडर होणाऱ्या घटकांची संख्या कमी करते. हे विशेषतः फायदेशीर आहे जर ग्राहक घटक ॲप्लिकेशन ट्रीमध्ये (tree) खूप आत असतील आणि त्यांना कॉन्टेक्स्टवर आधारित त्यांचे डिस्प्ले (display) क्वचितच अपडेट (update) करण्याची आवश्यकता असेल.

उदाहरण:

            import React, { createContext, useState, useMemo } from 'react';

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  const themeValue = useMemo(() => ({ theme, toggleTheme }), [theme, toggleTheme]);

  return (
    
      {/* Theme-aware components will be placed here.  The toggleTheme function's parent is higher in the tree than the consumers, so any re-renders of toggleTheme's parent trigger updates to theme consumers */}
      
    
  );
}

function ThemeAwareComponent() {
  // ... component logic
}

            

              
                Copy
              
            
          

3. `useReducer` सह प्रदाता व्हॅल्यू अपडेट्स

अधिक जटिल स्टेट व्यवस्थापनासाठी, तुमच्या कॉन्टेक्स्ट प्रदात्यामध्ये `useReducer` हुक वापरण्याचा विचार करा. `useReducer` स्टेट लॉजिक (state logic) केंद्रित (centralize) करण्यास आणि अपडेट पॅटर्न (update patterns) ऑप्टिमाइझ (optimize) करण्यास मदत करू शकते. हे एक अंदाज लावता येण्यासारखे स्टेट ट्रान्झिशन मॉडेल (state transition model) प्रदान करते, जे कार्यक्षमतेसाठी ऑप्टिमाइझ करणे सोपे करू शकते. मेमोरायझेशनसह (memoization) हे एकत्रितपणे, अतिशय कार्यक्षम कॉन्टेक्स्ट व्यवस्थापनात (context management) परिणाम करू शकते.

उदाहरण:

            import React, { createContext, useReducer, useMemo } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

const CountContext = createContext();

function CountProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  const value = useMemo(() => ({
    count: state.count,
    dispatch,
  }), [state.count, dispatch]);

  return (
    
      {children}
    
  );
}

export { CountContext, CountProvider };

            

              
                Copy
              
            
          

या उदाहरणामध्ये, `useReducer` काउंट स्टेट व्यवस्थापित करते. `dispatch` फंक्शन कॉन्टेक्स्ट व्हॅल्यूमध्ये (context value) समाविष्ट आहे, ज्यामुळे ग्राहकांना स्टेट अपडेट (state update) करता येते. `value` अनावश्यक री-रेंडरिंग टाळण्यासाठी मेमोराइझ (memoized) केले आहे.

4. कॉन्टेक्स्ट व्हॅल्यू विघटन

कॉन्टेक्स्ट व्हॅल्यू म्हणून एक मोठी, जटिल ऑब्जेक्ट (complex object) प्रदान करण्याऐवजी, ते लहान, अधिक विशिष्ट कॉन्टेक्स्टमध्ये (context) विभाजित करण्याचा विचार करा. ही रणनीती, जी मोठ्या, अधिक जटिल ॲप्लिकेशन्समध्ये (applications) वापरली जाते, बदलांना वेगळे (isolate) करण्यात आणि री-रेंडरच्या कार्यक्षेत्र कमी करण्यास मदत करू शकते. जर कॉन्टेक्स्टचा (context) एक विशिष्ट भाग बदलला, तर फक्त त्याच विशिष्ट कॉन्टेक्स्टचे (context) ग्राहक री-रेंडर करतील.

उदाहरण:

            import React, { createContext, useState, useMemo } from 'react';

const UserContext = createContext();
const ThemeContext = createContext();

function App() {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');

  const userValue = useMemo(() => ({ user, setUser }), [user, setUser]);
  const themeValue = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);

  return (
    
      
        {/* Components that use user data or theme data */}
      
    
  );
}

            

              
                Copy
              
            
          

हा दृष्टीकोन दोन स्वतंत्र कॉन्टेक्स्ट (context), `UserContext` आणि `ThemeContext` तयार करतो. जर थीम बदलली, तर फक्त `ThemeContext` वापरणारे घटक री-रेंडर करतील. त्याचप्रमाणे, जर वापरकर्ता डेटा बदलला, तर फक्त `UserContext` वापरणारे घटक री-रेंडर करतील. हा दाणेदार दृष्टीकोन (granular approach) कार्यक्षमतेत (performance) लक्षणीय सुधारणा करू शकतो, विशेषत: ॲप्लिकेशन्समध्ये (applications) जेथे तुमच्या ॲप्लिकेशनचा (application) विविध भाग स्वतंत्रपणे विकसित होतात. हे विशेषतः डायनॅमिक (dynamic) सामग्री असलेल्या ॲप्लिकेशन्समध्ये (applications) महत्वाचे आहे जेथे वेगवेगळ्या ग्लोबल (global) प्रदेशांमध्ये (regions) वैयक्तिक वापरकर्ता प्राधान्ये (preferences) किंवा देश-विशिष्ट सेटिंग्ज (country-specific settings) भिन्न असू शकतात.

5. ग्राहकांसह (Consumers) `React.memo` आणि `useCallback` वापरणे

प्रदाता अनुकूलनांना (provider optimizations) ग्राहक घटकांमध्ये (consumer components) अनुकूलनांनी पूरक करा. `React.memo` मध्ये कॉन्टेक्स्ट व्हॅल्यू वापरणारे कार्यात्मक घटक गुंडाळा. हे प्रॉप्स (props) (कॉन्टेक्स्ट व्हॅल्यूसह) बदलले नसल्यास री-रेंडरिंग (re-renders) होण्यापासून प्रतिबंधित करते. चाइल्ड (child) घटकांकडे (components) पाठवलेल्या इव्हेंट हँडलर्ससाठी, `useCallback` वापरा जेणेकरून त्याचे अवलंबित्व (dependencies) बदलले नसल्यास हँडलर फंक्शन (handler function) पुन्हा तयार होऊ नये.

उदाहरण:

            import React, { useContext, memo } from 'react';
import { UserContext } from './UserContext';

const UserProfile = memo(() => {
  const { user } = useContext(UserContext);

  if (!user) {
    return <div>Please log in</div>;
  }

  return (
    <div>
      <p>Welcome, {user.name}!</p>
    </div>
  );
});

            

              
                Copy
              
            
          

`UserProfile` ला `React.memo` ने गुंडाळून, आम्ही ते री-रेंडर होण्यापासून प्रतिबंधित करतो, जर कॉन्टेक्स्टने (context) दिलेला `user` ऑब्जेक्ट (object) तोच राहिला. जे ॲप्लिकेशन्स (applications) प्रतिसाद देणारे (responsive) आणि गुळगुळीत (smooth) ॲनिमेशन (animations) पुरवतात, त्यांच्यासाठी हे महत्त्वपूर्ण आहे, अगदी जेव्हा वापरकर्ता डेटा वारंवार अपडेट होतो.

6. Context Consumers चे अनावश्यक री-रेंडरिंग (Rerendering) टाळा

तुम्हाला कॉन्टेक्स्ट व्हॅल्यूची (context value) नेमकी केव्हा आवश्यकता आहे याचे काळजीपूर्वक मूल्यांकन करा. जर एखाद्या घटकाला कॉन्टेक्स्ट बदलांवर प्रतिक्रिया देण्याची आवश्यकता नसेल, तर त्या घटकात `useContext` वापरणे टाळा. त्याऐवजी, कॉन्टेक्स्ट व्हॅल्यूज (context values) एका पॅरंट (parent) घटकाकडून प्रॉप्स म्हणून पास करा जे *कॉन्टेक्स्ट* वापरतात. हे ॲप्लिकेशन कार्यक्षमतेतील (application performance) एक मुख्य डिझाइन तत्त्व आहे. तुमच्या ॲप्लिकेशनची (application) रचना कार्यक्षमतेवर कसा परिणाम करते, याचे विश्लेषण करणे महत्त्वाचे आहे, विशेषत: अशा ॲप्लिकेशन्ससाठी ज्यामध्ये विस्तृत वापरकर्ता आधार (user base) आणि मोठ्या प्रमाणात वापरकर्ते आणि रहदारी (traffic) आहे.

उदाहरण:

            import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function Header() {
  return (
    <ThemeConsumer>
      {
        (theme) => (
          <header style={{ backgroundColor: theme.background }}>
            {/* Header content */}
          </header>
        )
      }
    </ThemeConsumer>
  );
}

function ThemeConsumer({ children }) {
  const { theme } = useContext(ThemeContext);
  return children(theme);
}

            

              
                Copy
              
            
          

या उदाहरणामध्ये, `Header` घटक थेट `useContext` वापरत नाही. त्याऐवजी, ते `ThemeConsumer` घटकावर अवलंबून असते जे थीम प्राप्त करते आणि ती प्रॉप (prop) म्हणून प्रदान करते. जर `Header` ला थीम बदलांना थेट प्रतिसाद देण्याची आवश्यकता नसेल, तर त्याचा पॅरंट घटक आवश्यक डेटा प्रॉप्स म्हणून देऊ शकतो, ज्यामुळे `Header` चे अनावश्यक री-रेंडरिंग (re-renders) टाळता येते.

7. प्रोफाइलिंग (Profiling) आणि कार्यक्षमतेचे (Performance) परीक्षण (Monitoring)

कार्यक्षमतेतील (performance) अडथळे ओळखण्यासाठी तुमच्या React ॲप्लिकेशनचे (React application) नियमितपणे प्रोफाइल (profile) करा. React Developer Tools एक्स्टेंशन (Chrome आणि Firefox साठी उपलब्ध) उत्कृष्ट प्रोफाइलिंग क्षमता प्रदान करते. घटक रेंडर वेळा (component render times) यांचे विश्लेषण करण्यासाठी आणि जे घटक जास्त री-रेंडर होत आहेत ते ओळखण्यासाठी कार्यप्रदर्शन टॅब वापरा. एखादा घटक का री-रेंडर होत आहे हे निर्धारित करण्यासाठी `why-did-you-render` सारखी साधने वापरा. तुमच्या ॲप्लिकेशनच्या कार्यक्षमतेचे (performance) वेळेनुसार परीक्षण (monitoring) केल्याने, विशेषत: विविध नेटवर्क (network) परिस्थिती आणि उपकरणांसह, जागतिक प्रेक्षकांसाठी ॲप्लिकेशन (application) तैनात (deployments) करताना, कार्यक्षमतेतील घट (degradations) ओळखण्यास आणि त्यावर सक्रियपणे तोडगा काढण्यास मदत होते.

तुमच्या ॲप्लिकेशनच्या विभागाचे कार्यप्रदर्शन (performance) मोजण्यासाठी `React.Profiler` घटक वापरा.

            
import React from 'react';

function App() {
  return (
    <React.Profiler id="App" onRender={(id, phase, actualDuration, baseDuration, startTime, commitTime, interactions) => {
      console.log(
        `App: ${id} - ${phase} - ${actualDuration} - ${baseDuration}`
      );
    }}>
      {/* Your application components */}
    </React.Profiler>
  );
}

            

              
                Copy
              
            
          

या मेट्रिक्सचे (metrics) नियमितपणे विश्लेषण (analyzing) केल्याने हे सुनिश्चित होते की अंमलात आणलेल्या अनुकूलन (optimization) धोरणांचे (strategies) प्रभावी (effective) राहतात. या साधनांचे संयोजन (combination) ऑप्टिमायझेशन (optimization) प्रयत्नांवर (efforts) लक्ष केंद्रित करण्यासाठी अमूल्य अभिप्राय (feedback) प्रदान करेल.

सर्वोत्तम पद्धती (Best Practices) आणि कृतीक्षम अंतर्दृष्टी (Actionable Insights)

• मेमोरायझेशनला (Memoization) प्राधान्य द्या: विशेषत: जटिल वस्तू आणि फंक्शन्ससाठी (functions), नेहमी `useMemo` आणि `useCallback` सह कॉन्टेक्स्ट व्हॅल्यू (context values) मेमोराइझ (memoizing) करण्याचा विचार करा.
• ग्राहक घटकांचे (Consumer components) अनुकूलन करा: अनावश्यक री-रेंडरिंग (re-renders) टाळण्यासाठी ग्राहक घटकांना `React.memo` मध्ये गुंडाळा. जेथे मोठ्या प्रमाणात रेंडरिंग होत आहे, तेथे हे DOM च्या (DOM) शीर्ष स्तरावरील घटकांसाठी (components) खूप महत्वाचे आहे.
• अनावश्यक अपडेट्स (Updates) टाळा: कॉन्टेक्स्ट अपडेट्सचे (context updates) काळजीपूर्वक व्यवस्थापन करा आणि आवश्यक नसल्यास ते ट्रिगर (trigger) करणे टाळा.
• कॉन्टेक्स्ट व्हॅल्यूचे (Context values) विघटन (Decompose) करा: री-रेंडरच्या कार्यक्षेत्र कमी करण्यासाठी मोठ्या कॉन्टेक्स्टचे (context) लहान, अधिक विशिष्ट कॉन्टेक्स्टमध्ये (context) विभाजन करण्याचा विचार करा.
• नियमितपणे प्रोफाइल (Profile) करा: कार्यक्षमतेतील (performance) अडथळे ओळखण्यासाठी आणि त्यावर तोडगा काढण्यासाठी React Developer Tools आणि इतर प्रोफाइलिंग साधने वापरा.
• भिन्न वातावरणात (Environments) चाचणी करा: जगभरातील वापरकर्त्यांसाठी इष्टतम (optimal) कार्यक्षमता सुनिश्चित करण्यासाठी, विविध उपकरणे (devices), ब्राउझर (browsers) आणि नेटवर्क (network) परिस्थितीमध्ये तुमच्या ॲप्लिकेशन्सची (applications) चाचणी करा. हे तुम्हाला तुमच्या ॲप्लिकेशनचा (application) विस्तृत श्रेणीतील वापरकर्त्यांच्या अनुभवांना कसा प्रतिसाद मिळतो, याची समग्र माहिती (holistic understanding) देईल.
• लायब्ररींचा (Libraries) विचार करा: Zustand, Jotai, आणि Recoil सारख्या लायब्ररी (library) स्टेट व्यवस्थापनासाठी (state management) अधिक कार्यक्षम आणि अनुकूलित (optimized) पर्याय देऊ शकतात. जर तुम्हाला कार्यक्षमतेच्या समस्या येत असतील, तर या लायब्ररींचा विचार करा, कारण त्या स्टेट व्यवस्थापनासाठी (state management) तयार केल्या आहेत.

निष्कर्ष

कार्यक्षम आणि स्केलेबल (scalable) React ॲप्लिकेशन्स (React applications) तयार करण्यासाठी React Context कार्यक्षमतेचे (performance) अनुकूलन करणे महत्त्वपूर्ण आहे. या ब्लॉग पोस्टमध्ये (blog post) चर्चा केलेल्या तंत्रांचा वापर करून, जसे की मेमोरायझेशन, व्हॅल्यू विघटन (value decomposition) आणि घटक संरचनेचा (component structure) विचार करणे, तुम्ही तुमच्या ॲप्लिकेशन्सची (applications) प्रतिक्रिया क्षमता (responsiveness) मोठ्या प्रमाणात सुधारू शकता आणि एकूण वापरकर्ता अनुभव वाढवू शकता. तुमच्या ॲप्लिकेशनचे (application) नियमितपणे प्रोफाइल (profile) करणे आणि त्याची कार्यक्षमता (performance) सतत परीक्षण (monitor) करणे लक्षात ठेवा जेणेकरून तुमची अनुकूलन धोरणे (optimization strategies) प्रभावी (effective) राहतील. जगभरातील प्रेक्षकांनी वापरलेल्या उच्च-कार्यक्षमतेच्या ॲप्लिकेशन्सच्या (applications) विकासासाठी ही तत्त्वे विशेषतः आवश्यक आहेत, जेथे प्रतिसादक्षमता (responsiveness) आणि कार्यक्षमता (efficiency) अत्यंत महत्त्वाची आहे.

React Context च्या अंतर्निहित (underlying) यंत्रणेची (mechanisms) माहिती घेऊन आणि तुमच्या कोडचे सक्रियपणे अनुकूलन (optimizing) करून, तुम्ही अशी ॲप्लिकेशन्स (applications) तयार करू शकता जी शक्तिशाली (powerful) आणि कार्यक्षम (performant) दोन्ही आहेत, ज्यामुळे जगभरातील वापरकर्त्यांसाठी एक गुळगुळीत (smooth) आणि आनंददायक अनुभव मिळतो.