React कंकरंट मोडचे टाइम स्लाइसिंग वैशिष्ट्य, त्याचे रेंडरिंग वेळेचे बजेट वाटप आणि ते ॲपची प्रतिसादक्षमता व कार्यप्रदर्शन कसे सुधारते ते जाणून घ्या. व्यावहारिक उदाहरणे व सर्वोत्तम पद्धतींसह शिका.
React कंकरंट मोड टाइम स्लाइसिंग: रेंडरिंग वेळेचे बजेट वाटप
React कंकरंट मोड हे एक गेम-चेंजिंग वैशिष्ट्य आहे जे React ॲप्लिकेशन्समध्ये प्रतिसादक्षमता आणि कार्यप्रदर्शनाची नवीन पातळी उघडते. कंकरंट मोडच्या केंद्रस्थानी टाइम स्लाइसिंग ही संकल्पना आहे, जी React ला दीर्घकाळ चालणाऱ्या रेंडरिंग कार्यांना लहान, अधिक व्यवस्थापित करण्यायोग्य भागांमध्ये विभाजित करण्याची परवानगी देते. ही ब्लॉग पोस्ट टाइम स्लाइसिंगच्या बारकाव्यांमध्ये, त्याच्या रेंडरिंग वेळेच्या बजेट वाटपामध्ये आणि ते वापरकर्त्याच्या अनुभवात लक्षणीय सुधारणा कशी करते यामध्ये खोलवर जाईल.
कंकरंट मोडची गरज समजून घेणे
पारंपारिक React समकालिक पद्धतीने (synchronous manner) कार्य करते. जेव्हा एखादा घटक (component) अपडेट होतो, तेव्हा संपूर्ण घटक ट्री (component tree) पुन्हा रेंडर होईपर्यंत React मुख्य थ्रेड (main thread) ब्लॉक करते. यामुळे विशेषतः अनेक घटकांसह किंवा संगणकीयदृष्ट्या गहन रेंडरिंग लॉजिक असलेल्या जटिल ॲप्लिकेशन्समध्ये लक्षणीय विलंब होऊ शकतो. हे विलंब खालीलप्रमाणे दिसून येतात:
- अस्थिर ॲनिमेशन: रेंडरिंग दरम्यान ब्राउझर ब्लॉक झाल्यामुळे ॲनिमेशन तुटक आणि असमान दिसतात.
- अप्रतिक्रियाशील UI: React रेंडर करत असताना ॲप्लिकेशन वापरकर्त्याच्या इनपुटला (क्लिक्स, कीस्ट्रोक्स) प्रतिसाद देत नाही.
- खराब समजले जाणारे कार्यप्रदर्शन: अंतर्निहित डेटा फेचिंग वेगवान असले तरीही, वापरकर्त्यांना ॲप्लिकेशन मंद आणि सुस्त वाटते.
कंकरंट मोड React ला अतुल्यकालिकपणे (asynchronously) कार्य करण्यास सक्षम करून या समस्यांचे निराकरण करते, ज्यामुळे ते रेंडरिंग कार्यांना वापरकर्ता इनपुट हाताळणे किंवा UI अपडेट करणे यासारख्या इतर कार्यांसह मिसळू शकते. टाइम स्लाइसिंग ही हे शक्य करणारी एक प्रमुख यंत्रणा आहे.
टाइम स्लाइसिंग म्हणजे काय?
टाइम स्लाइसिंग, ज्याला सहकारी मल्टीटास्किंग (cooperative multitasking) असेही म्हणतात, ही एक अशी पद्धत आहे जिथे दीर्घकाळ चालणारे कार्य लहान कार्य युनिट्समध्ये विभागले जाते. React ची फायबर आर्किटेक्चर, जी कंकरंट मोडचा आधारस्तंभ आहे, React ला आवश्यकतेनुसार रेंडरिंगचे कार्य थांबवण्याची, पुन्हा सुरू करण्याची आणि अगदी सोडून देण्याची परवानगी देते. रेंडरिंग अपडेटच्या संपूर्ण कालावधीसाठी मुख्य थ्रेडला ब्लॉक करण्याऐवजी, React वेळोवेळी ब्राउझरला नियंत्रण परत देऊ शकते, ज्यामुळे ते इतर इव्हेंट्स हाताळू शकते आणि प्रतिसादक्षम UI राखू शकते.
याची कल्पना अशी करा: तुम्ही एक मोठे भित्तिचित्र (mural) रंगवत आहात. संपूर्ण भित्तिचित्र एकाच सत्रात रंगवण्याचा प्रयत्न करण्याऐवजी, तुम्ही ते लहान विभागांमध्ये विभागता आणि प्रत्येक विभागावर थोड्या काळासाठी काम करता. यामुळे तुम्हाला विश्रांती घेता येते, बाजूने जाणाऱ्यांच्या प्रश्नांना उत्तरे देता येतात आणि भित्तिचित्र तुम्हाला जास्त काम न देता सहजपणे प्रगती करत आहे याची खात्री करता येते. त्याचप्रमाणे, React रेंडरिंग कार्यांना लहान स्लाइसमध्ये विभागते आणि त्यांना इतर ब्राउझर कार्यांसह मिसळते.
रेंडरिंग वेळेचे बजेट वाटप
टाइम स्लाइसिंगचा एक महत्त्वाचा पैलू म्हणजे रेंडरिंग वेळेच्या बजेटचे वाटप. हे अशा वेळेस सूचित करते जे React ला ब्राउझरला नियंत्रण परत देण्यापूर्वी रेंडरिंगवर खर्च करण्याची परवानगी आहे. त्यानंतर ब्राउझरला वापरकर्ता इनपुट हाताळण्याची, स्क्रीन अपडेट करण्याची आणि इतर कार्ये करण्याची संधी मिळते. ब्राउझरचे काम झाल्यावर, React जिथे थांबले होते तिथून रेंडरिंग पुन्हा सुरू करू शकते, त्याच्या वाटप केलेल्या वेळेच्या बजेटचा आणखी एक भाग वापरून.
React ला वाटप केलेले विशिष्ट वेळेचे बजेट ब्राउझर आणि उपलब्ध संसाधनांद्वारे निश्चित केले जाते. React एक चांगला नागरिक बनण्याचा आणि मुख्य थ्रेडवर मक्तेदारी न ठेवण्याचा प्रयत्न करते, याची खात्री करते की ब्राउझर वापरकर्त्याच्या परस्परसंवादांना प्रतिसाद देत राहतो.
React वेळेचे बजेट कसे व्यवस्थापित करते
React रेंडरिंग कार्य शेड्यूल करण्यासाठी `requestIdleCallback` API (किंवा जुन्या ब्राउझरसाठी तत्सम पॉलीफिल) वापरते. `requestIdleCallback` React ला ब्राउझर निष्क्रिय असताना (म्हणजे ते वापरकर्ता इनपुट हाताळण्यात किंवा इतर गंभीर ऑपरेशन्स करण्यात व्यस्त नसताना) पार्श्वभूमी कार्ये करण्यास अनुमती देते. `requestIdleCallback` ला प्रदान केलेल्या कॉलबॅकना एक `deadline` ऑब्जेक्ट प्राप्त होतो, जो सध्याच्या निष्क्रिय कालावधीत शिल्लक असलेल्या वेळेची मात्रा दर्शवतो. React हे `deadline` वापरून ब्राउझरला नियंत्रण परत देण्यापूर्वी किती रेंडरिंग कार्य करू शकते हे ठरवते.
React वेळेचे बजेट कसे व्यवस्थापित करू शकते याचे एक सरलीकृत उदाहरण येथे दिले आहे:
- React `requestIdleCallback` वापरून रेंडरिंग कार्य शेड्यूल करते.
- जेव्हा `requestIdleCallback` कार्यान्वित होते, तेव्हा React ला एक `deadline` ऑब्जेक्ट प्राप्त होतो.
- React घटकांना (components) रेंडर करणे सुरू करते.
- As React renders, it checks the `deadline` object to see how much time remains.
- If React runs out of time (i.e., the deadline is reached), it pauses rendering and yields control back to the browser.
- The browser handles user input, updates the screen, etc.
- When the browser is idle again, React resumes rendering where it left off, using another slice of its allocated time budget.
- This process continues until all components have been rendered.
टाइम स्लाइसिंगचे फायदे
टाइम स्लाइसिंग React ॲप्लिकेशन्ससाठी अनेक महत्त्वपूर्ण फायदे देते:
- सुधारित प्रतिसादक्षमता: रेंडरिंग कार्यांना लहान भागांमध्ये विभागून आणि त्यांना इतर कार्यांसह मिसळून, टाइम स्लाइसिंग दीर्घकाळ चालणाऱ्या अपडेट्स दरम्यान UI ला अप्रतिसादक्षम होण्यापासून प्रतिबंधित करते. React पार्श्वभूमीत रेंडर करत असतानाही वापरकर्ते ॲप्लिकेशनशी सहजपणे संवाद साधू शकतात.
- वर्धित समजले जाणारे कार्यप्रदर्शन: एकूण रेंडरिंग वेळ समान राहिल्यासही, टाइम स्लाइसिंगमुळे ॲप्लिकेशन खूप वेगवान वाटू शकते. ब्राउझरला स्क्रीन अधिक वारंवार अपडेट करण्याची परवानगी देऊन, React वापरकर्त्याला अधिक जलद दृश्य प्रतिसाद देऊ शकते, ज्यामुळे अधिक प्रतिसादक्षम ॲप्लिकेशनचा भ्रम निर्माण होतो.
- उत्तम वापरकर्ता अनुभव: सुधारित प्रतिसादक्षमता आणि वर्धित समजले जाणारे कार्यप्रदर्शन यांच्या संयोगामुळे वापरकर्त्याचा अनुभव लक्षणीयरीत्या चांगला होतो. विलंब किंवा अप्रतिसादक्षमतेमुळे वापरकर्त्यांना निराशा किंवा चिडचिड होण्याची शक्यता कमी असते.
- महत्वाच्या अपडेट्सना प्राधान्य: कंकरंट मोड React ला महत्त्वाच्या अपडेट्सना, जसे की वापरकर्ता इनपुटशी संबंधित अपडेट्सना प्राधान्य देण्याची परवानगी देतो. यामुळे UI वापरकर्त्याच्या परस्परसंवादांना प्रतिसाद देत राहतो, जरी इतर कमी महत्त्वाचे अपडेट्स प्रगतीपथावर असले तरीही.
तुमच्या React ॲप्लिकेशन्समध्ये टाइम स्लाइसिंगचा लाभ कसा घ्यावा
टाइम स्लाइसिंगचा फायदा घेण्यासाठी, तुम्हाला तुमच्या React ॲप्लिकेशनमध्ये कंकरंट मोड सक्षम (enable) करणे आवश्यक आहे. हे रूट तयार करण्यासाठी योग्य APIs वापरून केले जाऊ शकते:
React 18 आणि नंतरच्या आवृत्त्यांसाठी:
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container); // Create a root
root.render(<App />);
For React 17 and earlier (using the `react-dom/unstable_concurrentMode` entry point):
import ReactDOM from 'react-dom';
ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />);
एकदा कंकरंट मोड सक्षम झाल्यावर, React रेंडरिंग अपडेट्सवर आपोआप टाइम स्लाइसिंग लागू करेल. तथापि, कंकरंट मोडसाठी तुमच्या ॲप्लिकेशनला आणखी ऑप्टिमाइझ करण्यासाठी तुम्ही काही अतिरिक्त पाऊले उचलू शकता:
1. सस्पेन्सचा स्वीकार करा
सस्पेन्स (Suspense) हा एक बिल्ट-इन React घटक आहे जो तुम्हाला डेटा फेचिंगसारख्या अतुल्यकालिक ऑपरेशन्सना (asynchronous operations) सहजपणे हाताळण्याची परवानगी देतो. जेव्हा सस्पेन्समध्ये गुंडाळलेला घटक (component) अद्याप उपलब्ध नसलेला डेटा रेंडर करण्याचा प्रयत्न करतो, तेव्हा सस्पेन्स रेंडरिंग प्रक्रिया निलंबित करेल आणि फॉलबॅक UI (उदा. लोडिंग स्पिनर) प्रदर्शित करेल. एकदा डेटा उपलब्ध झाल्यावर, सस्पेन्स आपोआप घटकाला रेंडर करणे पुन्हा सुरू करेल.
सस्पेन्स कंकरंट मोडसह अखंडपणे कार्य करते, ज्यामुळे React ला डेटा लोड होण्याची वाट पाहत असताना ॲप्लिकेशनच्या इतर भागांच्या रेंडरिंगला प्राधान्य देण्याची परवानगी मिळते. यामुळे डेटाची वाट पाहत असताना संपूर्ण UI ला ब्लॉक होण्यापासून रोखून वापरकर्ता अनुभव लक्षणीयरीत्या सुधारू शकतो.
उदाहरण:
import React, { Suspense } from 'react';
const ProfileDetails = React.lazy(() => import('./ProfileDetails')); // Lazy load the component
function MyComponent() {
return (
<Suspense fallback={<div>Loading profile...</div>}>
<ProfileDetails />
</Suspense>
);
}
export default MyComponent;
या उदाहरणामध्ये, `ProfileDetails` घटक `React.lazy` वापरून लेझी लोड केला जातो. याचा अर्थ घटक प्रत्यक्षात आवश्यक असेल तेव्हाच लोड केला जाईल. `Suspense` घटक `ProfileDetails` ला वेढतो आणि घटक लोड होत असताना लोडिंग मेसेज प्रदर्शित करतो. यामुळे घटक लोड होण्याची वाट पाहत असताना संपूर्ण ॲप्लिकेशन ब्लॉक होण्यापासून प्रतिबंधित होते.
2. ट्रान्झिशन (Transitions) वापरा
ट्रान्झिशन (Transitions) ही अपडेट्सना गैर-तात्काळ (non-urgent) म्हणून चिन्हांकित करण्याची एक यंत्रणा आहे. जेव्हा तुम्ही `useTransition` मध्ये अपडेट गुंडाळता, तेव्हा React तात्काळ अपडेट्सना (जसे की वापरकर्ता इनपुटशी संबंधित) ट्रान्झिशन अपडेटवर प्राधान्य देईल. यामुळे तुम्हाला UI ला ब्लॉक न करता ब्राउझरला प्रक्रिया करण्यासाठी वेळ मिळेपर्यंत गैर-गंभीर अपडेट्स पुढे ढकलण्याची (defer) परवानगी मिळते.
मोठी यादी फिल्टर करणे किंवा जटिल चार्ट अपडेट करणे यासारख्या संगणकीयदृष्ट्या गहन रेंडरिंगला चालना देणाऱ्या अपडेट्ससाठी ट्रान्झिशन विशेषतः उपयुक्त आहेत. या अपडेट्सना गैर-तात्काळ म्हणून चिन्हांकित करून, तुम्ही हे सुनिश्चित करू शकता की UI वापरकर्ता परस्परसंवादांना प्रतिसाद देत राहतो, जरी अपडेट्स प्रगतीपथावर असले तरीही.
उदाहरण:
import React, { useState, useTransition } from 'react';
function MyComponent() {
const [query, setQuery] = useState('');
const [list, setList] = useState(initialList);
const [isPending, startTransition] = useTransition();
const handleChange = (e) => {
const newQuery = e.target.value;
setQuery(newQuery);
startTransition(() => {
// Filter the list based on the query
setList(initialList.filter(item => item.toLowerCase().includes(newQuery.toLowerCase())));
});
};
return (
<div>
<input type="text" value={query} onChange={handleChange} />
{isPending ? <p>Filtering...</p> : null}
<ul>
{list.map(item => (<li key={item}>{item}</li>))}
</ul>
</div>
);
}
export default MyComponent;
या उदाहरणामध्ये, `handleChange` फंक्शन वापरकर्त्याच्या इनपुटवर आधारित यादी फिल्टर करते. `startTransition` फंक्शन `setList` कॉलला वेढण्यासाठी वापरले जाते, ज्यामुळे अपडेट गैर-तात्काळ म्हणून चिन्हांकित होते. यामुळे React ला इनपुट फील्ड अपडेट करणे यासारख्या इतर अपडेट्सना यादी फिल्टर करण्यावर प्राधान्य देण्याची परवानगी मिळते. `isPending` स्टेट व्हेरिएबल सूचित करते की ट्रान्झिशन सध्या प्रगतीपथावर आहे की नाही, ज्यामुळे तुम्हाला लोडिंग इंडिकेटर प्रदर्शित करता येतो.
3. घटक रेंडरिंग ऑप्टिमाइझ करा
टाइम स्लाइसिंगसह देखील, React ला किती कार्य करावे लागेल हे कमी करण्यासाठी तुमच्या घटक रेंडरिंगला ऑप्टिमाइझ करणे अजूनही महत्त्वाचे आहे. घटक रेंडरिंग ऑप्टिमाइझ करण्याच्या काही रणनीतींमध्ये हे समाविष्ट आहे:
- मेमोआयझेशन (Memoization): घटकांना अनावश्यकपणे पुन्हा रेंडर होण्यापासून रोखण्यासाठी `React.memo` किंवा `useMemo` वापरा.
- कोड स्प्लिटिंग (Code Splitting): तुमच्या ॲप्लिकेशनला लहान भागांमध्ये विभाजित करा आणि `React.lazy` आणि `Suspense` वापरून मागणीनुसार लोड करा.
- व्हर्चुअलायझेशन (Virtualization): मोठ्या याद्या आणि टेबल्स कार्यक्षमतेने रेंडर करण्यासाठी `react-window` किंवा `react-virtualized` सारख्या लायब्ररी वापरा.
- कार्यक्षम डेटा स्ट्रक्चर्स: डेटा मॅनिप्युलेशन ऑपरेशन्सची कार्यप्रदर्शन सुधारण्यासाठी कार्यक्षम डेटा स्ट्रक्चर्स (उदा. Maps, Sets) वापरा.
4. तुमच्या ॲप्लिकेशनचे प्रोफाइल तयार करा
तुमच्या ॲप्लिकेशनमधील कार्यप्रदर्शन बॉटलनेक ओळखण्यासाठी React Profiler वापरा. प्रोफाईलर तुम्हाला प्रत्येक घटकाची रेंडरिंग वेळ रेकॉर्ड करण्याची आणि तुम्ही कार्यप्रदर्शन कुठे सुधारू शकता हे ओळखण्याची परवानगी देतो.
विचार करण्यासारख्या गोष्टी आणि संभाव्य तोटे
कंकरंट मोड आणि टाइम स्लाइसिंग महत्त्वपूर्ण फायदे देत असले तरी, काही गोष्टी विचारात घेणे आणि संभाव्य तोटे लक्षात ठेवणे आवश्यक आहे:
- वाढलेली जटिलता: कंकरंट मोड तुमच्या ॲप्लिकेशनमध्ये जटिलता वाढवू शकते, विशेषतः जर तुम्ही अतुल्यकालिक प्रोग्रामिंग संकल्पनांशी परिचित नसाल तर.
- सुसंगतता समस्या: काही जुन्या लायब्ररी आणि घटक कंकरंट मोडशी पूर्णपणे सुसंगत नसतील. तुमचे ॲप्लिकेशन योग्यरित्या कार्य करत आहे याची खात्री करण्यासाठी तुम्हाला या लायब्ररी अपडेट किंवा बदलण्याची आवश्यकता असू शकते.
- डीबगिंग आव्हाने: अतुल्यकालिक कोड डीबग करणे समकालिक कोड डीबग करण्यापेक्षा अधिक आव्हानात्मक असू शकते. तुमच्या ॲप्लिकेशनमधील कार्याची (execution) प्रक्रिया समजून घेण्यासाठी तुम्हाला विशेष डीबगिंग साधने वापरण्याची आवश्यकता असू शकते.
- अडखळण्याची शक्यता: दुर्मिळ प्रकरणांमध्ये, टाइम स्लाइसिंगमुळे किंचित अडखळण्याचा (stuttering) परिणाम होऊ शकतो जर React सतत रेंडरिंग थांबवत आणि पुन्हा सुरू करत असेल. घटक रेंडरिंग ऑप्टिमाइझ करून आणि ट्रान्झिशन योग्यरित्या वापरून हे सहसा कमी केले जाऊ शकते.
वास्तविक-जागतिक उदाहरणे आणि उपयोग प्रकरणे
खालील वैशिष्ट्ये असलेल्या ॲप्लिकेशन्समध्ये टाइम स्लाइसिंग विशेषतः फायदेशीर आहे:
- जटिल UIs: मोठ्या घटक ट्री (component trees) किंवा संगणकीयदृष्ट्या गहन रेंडरिंग लॉजिक असलेल्या ॲप्लिकेशन्समध्ये.
- वारंवार अपडेट्स: UI ला वारंवार अपडेट्सची आवश्यकता असलेल्या ॲप्लिकेशन्समध्ये, जसे की रिअल-टाइम डॅशबोर्ड किंवा परस्परसंवादी व्हिज्युअलायझेशन्स.
- मंद नेटवर्क कनेक्शन: मंद नेटवर्क कनेक्शनना सहजपणे हाताळण्याची आवश्यकता असलेल्या ॲप्लिकेशन्समध्ये.
- मोठे डेटासेट: मोठे डेटासेट प्रदर्शित आणि हाताळण्याची आवश्यकता असलेल्या ॲप्लिकेशन्समध्ये.
वास्तविक-जागतिक ॲप्लिकेशन्समध्ये टाइम स्लाइसिंग कसे वापरले जाऊ शकते याची काही विशिष्ट उदाहरणे येथे दिली आहेत:
- ई-कॉमर्स वेबसाइट्स: कमी गंभीर अपडेट्स पुढे ढकलून उत्पादनांच्या सूची आणि शोध परिणामांची प्रतिसादक्षमता सुधारणे.
- सोशल मीडिया प्लॅटफॉर्म: नवीन पोस्ट्स आणि टिप्पण्या लोड करत असतानाही UI वापरकर्त्याच्या परस्परसंवादांना प्रतिसाद देत राहतो याची खात्री करणे.
- मॅपिंग ॲप्लिकेशन्स: रेंडरिंग कार्यांना लहान भागांमध्ये विभाजित करून जटिल नकाशे आणि भौगोलिक डेटा सहजपणे रेंडर करणे.
- आर्थिक डॅशबोर्ड्स: UI ब्लॉक न करता आर्थिक डेटामध्ये रिअल-टाइम अपडेट्स प्रदान करणे.
- सहयोगी संपादन साधने: अनेक वापरकर्त्यांना लॅग (lag) किंवा अप्रतिसादक्षता न अनुभवता एकाच वेळी दस्तऐवज संपादित करण्यास सक्षम करणे.
निष्कर्ष
React कंकरंट मोडचे टाइम स्लाइसिंग वैशिष्ट्य हे React ॲप्लिकेशन्सची प्रतिसादक्षमता आणि समजले जाणारे कार्यप्रदर्शन सुधारण्यासाठी एक शक्तिशाली साधन आहे. रेंडरिंग कार्यांना लहान भागांमध्ये विभागून आणि त्यांना इतर कार्यांसह मिसळून, टाइम स्लाइसिंग दीर्घकाळ चालणाऱ्या अपडेट्स दरम्यान UI ला अप्रतिसादक्षम होण्यापासून प्रतिबंधित करते. सस्पेन्स, ट्रान्झिशन आणि इतर ऑप्टिमायझेशन तंत्रांचा स्वीकार करून, तुम्ही कंकरंट मोडची पूर्ण क्षमता अनलॉक करू शकता आणि लक्षणीयरीत्या चांगला वापरकर्ता अनुभव तयार करू शकता.
कंकरंट मोड तुमच्या ॲप्लिकेशनमध्ये जटिलता वाढवू शकत असले तरी, कार्यप्रदर्शन आणि वापरकर्ता अनुभवाच्या दृष्टीने ते देत असलेले फायदे प्रयत्नांना योग्य आहेत. React विकसित होत असताना, कंकरंट मोड React इकोसिस्टमचा एक महत्त्वाचा भाग बनण्याची शक्यता आहे. टाइम स्लाइसिंग आणि त्याच्या रेंडरिंग वेळेचे बजेट वाटप समजून घेणे हे उच्च-कार्यक्षम, प्रतिसादक्षम React ॲप्लिकेशन्स तयार करण्यासाठी आवश्यक आहे जे टोकियो, जपान सारख्या गजबजलेल्या महानगरांपासून ते मंगोलियासारख्या देशांमधील मर्यादित बँडविड्थ असलेल्या दुर्गम भागांपर्यंत जागतिक प्रेक्षकांना आनंददायक वापरकर्ता अनुभव देतात. तुमचे वापरकर्ते उच्च-श्रेणीच्या डेस्कटॉपवर असोत किंवा कमी-शक्तीच्या मोबाइल डिव्हाइसेसवर, कंकरंट मोड तुम्हाला एक गुळगुळीत आणि प्रतिसादक्षम अनुभव प्रदान करण्यास मदत करू शकते.