React useId: അക്സസ്സിബിലിറ്റിക്കും അതിനപ്പുറവും സ്ഥിരമായ ഐഡൻ്റിഫയറുകൾ നിർമ്മിക്കാൻ

നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുന്ന വെബ് ഡെവലപ്‌മെൻ്റ് രംഗത്ത്, അക്സസ്സിബിലിറ്റി (a11y) ഇപ്പോൾ ഒരു ചിന്തയല്ല, മറിച്ച് ഒരു അടിസ്ഥാന തത്വമാണ്. യൂസർ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഏറ്റവും ജനപ്രിയമായ ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറികളിലൊന്നായ റിയാക്ട്, ഡെവലപ്പർമാരെ അക്സസ്സിബിളും മികച്ച പ്രകടനം കാഴ്ചവെക്കുന്നതുമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ സഹായിക്കുന്ന ശക്തമായ ടൂളുകൾ നൽകുന്നു. ഈ ടൂളുകളിൽ ഒന്നാണ് റിയാക്ട് 18-ൽ അവതരിപ്പിച്ച useId ഹുക്ക്. ഈ ഹുക്ക് നിങ്ങളുടെ കമ്പോണൻ്റുകളിൽ സവിശേഷവും സ്ഥിരവുമായ ഐഡികൾ നിർമ്മിക്കുന്നതിനുള്ള ലളിതവും ഫലപ്രദവുമായ മാർഗ്ഗം നൽകുന്നു, ഇത് അക്സസ്സിബിലിറ്റി, സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR) അനുയോജ്യത, മൊത്തത്തിലുള്ള ആപ്ലിക്കേഷൻ്റെ കരുത്ത് എന്നിവ ഗണ്യമായി മെച്ചപ്പെടുത്തുന്നു.

എന്താണ് useId?

സെർവറിലും ക്ലയിൻ്റിലും സ്ഥിരതയുള്ള ഒരു യുണീക്ക് ഐഡി സ്ട്രിംഗ് നിർമ്മിക്കുന്ന ഒരു റിയാക്ട് ഹുക്ക് ആണ് useId. ഫോം ഇൻപുട്ടുകളിലേക്ക് ലേബലുകൾ ലിങ്ക് ചെയ്യുകയോ അല്ലെങ്കിൽ ARIA ആട്രിബ്യൂട്ടുകളെ എലമെൻ്റുകളുമായി ബന്ധിപ്പിക്കുകയോ പോലുള്ള സ്ഥിരമായ ഐഡികളെ ആശ്രയിക്കുന്ന അക്സസ്സിബിലിറ്റി ഫീച്ചറുകൾക്ക് ഇത് വളരെ പ്രധാനമാണ്.

useId-ന് മുമ്പ്, ഡെവലപ്പർമാർ റാൻഡം ഐഡികൾ നിർമ്മിക്കുകയോ ലൂപ്പുകൾക്കുള്ളിൽ ഇൻഡെക്സ് അധിഷ്ഠിത ഐഡികൾ ഉപയോഗിക്കുകയോ പോലുള്ള സാങ്കേതിക വിദ്യകളെ ആശ്രയിച്ചിരുന്നു. എന്നിരുന്നാലും, ഈ സമീപനങ്ങൾ സെർവറും ക്ലയിൻ്റും തമ്മിലുള്ള റെൻഡറിംഗിൽ പൊരുത്തക്കേടുകൾക്ക് ഇടയാക്കും, ഇത് ഹൈഡ്രേഷൻ പൊരുത്തക്കേടുകൾക്കും അക്സസ്സിബിലിറ്റി പ്രശ്നങ്ങൾക്കും കാരണമാകും. useId ഉറപ്പുള്ളതും സ്ഥിരതയുള്ളതും അതുല്യവുമായ ഐഡി നൽകി ഈ പ്രശ്നങ്ങൾ പരിഹരിക്കുന്നു.

എന്തുകൊണ്ടാണ് useId പ്രധാനപ്പെട്ടതാകുന്നത്?

ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിൻ്റെ നിരവധി നിർണ്ണായക വശങ്ങളെ useId അഭിസംബോധന ചെയ്യുന്നു:

അക്സസ്സിബിലിറ്റി (a11y)

അക്സസ്സിബിൾ റിച്ച് ഇൻ്റർനെറ്റ് ആപ്ലിക്കേഷൻസ് (ARIA) ആട്രിബ്യൂട്ടുകളും ശരിയായ HTML സെമാൻ്റിക്സുകളും എലമെൻ്റുകൾ തമ്മിലുള്ള ബന്ധം സ്ഥാപിക്കുന്നതിന് ഐഡികളെ ആശ്രയിക്കാറുണ്ട്. ഉദാഹരണത്തിന്, ഒരു <label> എലമെൻ്റ് അതിൻ്റെ for ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഒരു <input> എലമെൻ്റിൻ്റെ id-യുമായി ബന്ധിപ്പിക്കുന്നു. അതുപോലെ, aria-describedby പോലുള്ള ARIA ആട്രിബ്യൂട്ടുകൾ ഒരു എലമെൻ്റുമായി വിവരണാത്മക ടെക്സ്റ്റ് ബന്ധപ്പെടുത്തുന്നതിന് ഐഡികൾ ഉപയോഗിക്കുന്നു.

ഐഡികൾ ഡൈനാമിക്കായി ജനറേറ്റ് ചെയ്യുകയും അസ്ഥിരമാവുകയും ചെയ്യുമ്പോൾ, ഈ ബന്ധങ്ങൾ തകരാറിലായേക്കാം, ഇത് സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായക സാങ്കേതികവിദ്യകളെ ആശ്രയിക്കുന്ന ഉപയോക്താക്കൾക്ക് ആപ്ലിക്കേഷൻ അപ്രാപ്യമാക്കുന്നു. useId ഈ ഐഡികൾ സ്ഥിരമായി നിലനിൽക്കുന്നുവെന്ന് ഉറപ്പാക്കുകയും അക്സസ്സിബിലിറ്റി ഫീച്ചറുകളുടെ സമഗ്രത നിലനിർത്തുകയും ചെയ്യുന്നു.

ഉദാഹരണം: ഒരു ലേബലിനെ ഇൻപുട്ടുമായി ബന്ധിപ്പിക്കുന്നു

ഒരു ലേബലും ഇൻപുട്ട് ഫീൽഡുമുള്ള ഒരു ലളിതമായ ഫോം പരിഗണിക്കുക:

            import React, { useId } from 'react';

function MyForm() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Enter your name:</label>
      <input type="text" id={id} name="name" />
    </div>
  );
}

export default MyForm;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, useId ഒരു യുണീക്ക് ഐഡി ജനറേറ്റ് ചെയ്യുന്നു, അത് <label>-ന്റെ htmlFor ആട്രിബ്യൂട്ടിനും <input>-ന്റെ id ആട്രിബ്യൂട്ടിനും ഉപയോഗിക്കുന്നു. ഇത് ലേബൽ ഇൻപുട്ട് ഫീൽഡുമായി ശരിയായി ബന്ധപ്പെട്ടിരിക്കുന്നുവെന്ന് ഉറപ്പാക്കുകയും അക്സസ്സിബിലിറ്റി മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

സെർവർ-സൈഡ് റെൻഡറിംഗും (SSR) ഹൈഡ്രേഷനും

ഒരു വെബ് ആപ്ലിക്കേഷൻ്റെ പ്രാരംഭ HTML ക്ലയിൻ്റിന് അയയ്‌ക്കുന്നതിന് മുമ്പ് സെർവറിൽ റെൻഡർ ചെയ്യുന്ന ഒരു സാങ്കേതികതയാണ് സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR). ഇത് പ്രാരംഭ ലോഡ് സമയവും SEO-യും മെച്ചപ്പെടുത്തുന്നു. എന്നിരുന്നാലും, SSR ഒരു വെല്ലുവിളി ഉയർത്തുന്നു: ക്ലയിൻ്റ്-സൈഡ് റിയാക്ട് കോഡ് സെർവർ-റെൻഡർ ചെയ്ത HTML-നെ "ഹൈഡ്രേറ്റ്" ചെയ്യണം, അതായത് അത് ഇവൻ്റ് ലിസണറുകൾ അറ്റാച്ചുചെയ്യുകയും ആപ്ലിക്കേഷൻ സ്റ്റേറ്റ് നിയന്ത്രിക്കുകയും വേണം.

സെർവറിൽ ജനറേറ്റ് ചെയ്ത ഐഡികൾ ക്ലയിൻ്റിൽ ജനറേറ്റ് ചെയ്ത ഐഡികളുമായി പൊരുത്തപ്പെടുന്നില്ലെങ്കിൽ, റിയാക്ടിന് ഒരു ഹൈഡ്രേഷൻ മിസ്മാച്ച് പിശക് നേരിടേണ്ടിവരും. ഇത് അപ്രതീക്ഷിത സ്വഭാവത്തിനും പ്രകടന പ്രശ്നങ്ങൾക്കും ഇടയാക്കും. സെർവറിൽ ജനറേറ്റ് ചെയ്ത ഐഡികൾ ക്ലയിൻ്റിൽ ജനറേറ്റ് ചെയ്തവയുമായി ഒന്നുതന്നെയാണെന്ന് useId ഉറപ്പുനൽകുന്നു, ഇത് ഹൈഡ്രേഷൻ പൊരുത്തക്കേടുകൾ തടയുന്നു.

ഉദാഹരണം: Next.js ഉപയോഗിച്ചുള്ള SSR

SSR-നായി Next.js പോലുള്ള ഒരു ഫ്രെയിംവർക്ക് ഉപയോഗിക്കുമ്പോൾ, useId വളരെ വിലപ്പെട്ടതാണ്:

            // pages/index.js
import React, { useId } from 'react';

function Home() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Enter your email:</label>
      <input type="email" id={id} name="email" />
    </div>
  );
}

export default Home;

            

              
                Copy
              
            
          

Next.js ഈ കമ്പോണൻ്റ് സെർവറിൽ റെൻഡർ ചെയ്യുകയും പ്രാരംഭ HTML ജനറേറ്റ് ചെയ്യുകയും ചെയ്യും. ക്ലയിൻ്റ്-സൈഡ് റിയാക്ട് കോഡ് HTML-നെ ഹൈഡ്രേറ്റ് ചെയ്യുമ്പോൾ, ഐഡികൾ പൊരുത്തപ്പെടുന്നുവെന്ന് useId ഉറപ്പാക്കുകയും ഹൈഡ്രേഷൻ പിശകുകൾ തടയുകയും ചെയ്യുന്നു.

കമ്പോണൻ്റ് പുനരുപയോഗം

പുനരുപയോഗിക്കാവുന്ന കമ്പോണൻ്റുകൾ നിർമ്മിക്കുമ്പോൾ, കമ്പോണൻ്റിൻ്റെ ഓരോ ഇൻസ്റ്റൻസിനും യുണീക്ക് ഐഡികളുണ്ടെന്ന് ഉറപ്പാക്കേണ്ടത് അത്യാവശ്യമാണ്. ഒരു കമ്പോണൻ്റിൻ്റെ ഒന്നിലധികം ഇൻസ്റ്റൻസുകൾ ഒരേ ഐഡി പങ്കിടുകയാണെങ്കിൽ, അത് വൈരുദ്ധ്യങ്ങൾക്കും അപ്രതീക്ഷിത സ്വഭാവത്തിനും ഇടയാക്കും, പ്രത്യേകിച്ചും അക്സസ്സിബിലിറ്റി ഫീച്ചറുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ.

ഓരോ കമ്പോണൻ്റ് ഇൻസ്റ്റൻസിനും യുണീക്ക് ഐഡികൾ ജനറേറ്റ് ചെയ്യുന്ന പ്രക്രിയ useId ലളിതമാക്കുന്നു, ഇത് പുനരുപയോഗിക്കാവുന്നതും പരിപാലിക്കാവുന്നതുമായ കമ്പോണൻ്റുകൾ നിർമ്മിക്കുന്നത് എളുപ്പമാക്കുന്നു.

ഉദാഹരണം: പുനരുപയോഗിക്കാവുന്ന ഒരു ഇൻപുട്ട് കമ്പോണൻ്റ്

            import React, { useId } from 'react';

function InputField({ label }) {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>{label}:</label>
      <input type="text" id={id} name={label.toLowerCase()} />
    </div>
  );
}

export default InputField;

            

              
                Copy
              
            
          

ഇപ്പോൾ നിങ്ങൾക്ക് ഈ കമ്പോണൻ്റ് ഒരേ പേജിൽ ഐഡി വൈരുദ്ധ്യങ്ങളെക്കുറിച്ച് ആശങ്കപ്പെടാതെ ഒന്നിലധികം തവണ ഉപയോഗിക്കാം:

            import InputField from './InputField';

function MyPage() {
  return (
    <div>
      <InputField label="First Name" />
      <InputField label="Last Name" />
    </div>
  );
}

export default MyPage;

            

              
                Copy
              
            
          

useId എങ്ങനെ ഉപയോഗിക്കാം

useId ഉപയോഗിക്കുന്നത് ലളിതമാണ്. റിയാക്റ്റിൽ നിന്ന് ഹുക്ക് ഇമ്പോർട്ട് ചെയ്ത് നിങ്ങളുടെ കമ്പോണൻ്റിനുള്ളിൽ വിളിക്കുക:

            import React, { useId } from 'react';

function MyComponent() {
  const id = useId();

  return <div id={id}>Hello, world!</div>;
}

            

              
                Copy
              
            
          

useId ഹുക്ക് ഒരു യുണീക്ക് ഐഡി സ്ട്രിംഗ് നൽകുന്നു, അത് നിങ്ങൾക്ക് HTML എലമെൻ്റുകളുടെ id ആട്രിബ്യൂട്ട് സജ്ജീകരിക്കാനോ ARIA ആട്രിബ്യൂട്ടുകളിൽ റഫറൻസ് ചെയ്യാനോ ഉപയോഗിക്കാം.

ഐഡികൾക്ക് പ്രിഫിക്സ് നൽകൽ

ചില സന്ദർഭങ്ങളിൽ, ജനറേറ്റ് ചെയ്ത ഐഡിക്ക് ഒരു പ്രിഫിക്സ് ചേർക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. ഐഡികൾക്ക് നെയിംസ്പേസ് നൽകുന്നതിനോ കൂടുതൽ സന്ദർഭം നൽകുന്നതിനോ ഇത് ഉപയോഗപ്രദമാകും. useId പ്രിഫിക്സുകളെ നേരിട്ട് പിന്തുണയ്ക്കുന്നില്ലെങ്കിലും, ഐഡിയും ഒരു പ്രിഫിക്സും തമ്മിൽ സംയോജിപ്പിച്ച് നിങ്ങൾക്ക് ഇത് എളുപ്പത്തിൽ നേടാനാകും:

            import React, { useId } from 'react';

function MyComponent() {
  const id = useId();
  const prefixedId = `my-component-${id}`;

  return <div id={prefixedId}>Hello, world!</div>;
}

            

              
                Copy
              
            
          

കസ്റ്റം ഹുക്കുകളിൽ useId ഉപയോഗിക്കുന്നത്

ആന്തരിക ഉപയോഗത്തിനായി യുണീക്ക് ഐഡികൾ ജനറേറ്റ് ചെയ്യുന്നതിന് നിങ്ങൾക്ക് കസ്റ്റം ഹുക്കുകളിലും useId ഉപയോഗിക്കാം:

            import { useState, useEffect, useId } from 'react';

function useUniqueId() {
  const id = useId();
  return id;
}

function MyComponent() {
  const uniqueId = useUniqueId();

  return <div id={uniqueId}>Hello, world!</div>;
}

            

              
                Copy
              
            
          

മികച്ച രീതികളും പരിഗണനകളും

• നിങ്ങൾക്ക് യുണീക്കും സ്ഥിരവുമായ ഒരു ഐഡി ആവശ്യമുള്ളപ്പോഴെല്ലാം useId ഉപയോഗിക്കുക. റാൻഡം ഐഡികളെയോ ഇൻഡെക്സ് അധിഷ്ഠിത ഐഡികളെയോ ആശ്രയിക്കരുത്, പ്രത്യേകിച്ചും അക്സസ്സിബിലിറ്റി ഫീച്ചറുകൾ അല്ലെങ്കിൽ SSR കൈകാര്യം ചെയ്യുമ്പോൾ.
• മികച്ച ഓർഗനൈസേഷനും നെയിംസ്പേസിംഗിനും വേണ്ടി ഐഡികൾക്ക് പ്രിഫിക്സ് നൽകുന്നത് പരിഗണിക്കുക. ഇത് വൈരുദ്ധ്യങ്ങൾ തടയാനും നിങ്ങളുടെ കോഡ് ഡീബഗ് ചെയ്യുന്നത് എളുപ്പമാക്കാനും സഹായിക്കും.
• ഐഡിയുടെ സ്കോപ്പിനെക്കുറിച്ച് ബോധവാന്മാരായിരിക്കുക. നിലവിലെ റിയാക്ട് ട്രീക്കുള്ളിൽ useId ഒരു യുണീക്ക് ഐഡി ജനറേറ്റ് ചെയ്യുന്നു. നിങ്ങൾക്ക് ആഗോളതലത്തിൽ യുണീക്കായ ഒരു ഐഡി വേണമെങ്കിൽ, നിങ്ങൾ മറ്റൊരു സമീപനം ഉപയോഗിക്കേണ്ടി വന്നേക്കാം.
• നിങ്ങളുടെ കമ്പോണൻ്റുകൾ അക്സസ്സിബിലിറ്റി ടൂളുകൾ ഉപയോഗിച്ച് പരിശോധിക്കുക. നിങ്ങളുടെ ആപ്ലിക്കേഷൻ എല്ലാ ഉപയോക്താക്കൾക്കും ലഭ്യമാണെന്ന് ഉറപ്പാക്കാൻ സ്ക്രീൻ റീഡറുകൾ, ഓട്ടോമേറ്റഡ് അക്സസ്സിബിലിറ്റി ചെക്കറുകൾ തുടങ്ങിയ ടൂളുകൾ ഉപയോഗിക്കുക.

useId-നുള്ള ബദലുകൾ

റിയാക്ട് 18-ലും അതിനുശേഷമുള്ള പതിപ്പുകളിലും യുണീക്കും സ്ഥിരവുമായ ഐഡികൾ ജനറേറ്റ് ചെയ്യുന്നതിനുള്ള ശുപാർശിത സമീപനം useId ആണെങ്കിലും, റിയാക്റ്റിൻ്റെ പഴയ പതിപ്പുകൾക്കോ പ്രത്യേക ഉപയോഗ സാഹചര്യങ്ങൾക്കോ ബദൽ സമീപനങ്ങളുണ്ട്:

• nanoid: ചെറിയ, യുണീക്ക് ഐഡികൾ ജനറേറ്റ് ചെയ്യുന്നതിനുള്ള ഒരു ജനപ്രിയ ലൈബ്രറി. നിങ്ങൾക്ക് ആഗോളതലത്തിൽ യുണീക്കായ ഒരു ഐഡി വേണമെങ്കിൽ അല്ലെങ്കിൽ നിങ്ങൾ റിയാക്റ്റിൻ്റെ പഴയ പതിപ്പാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ ഇത് ഒരു നല്ല തിരഞ്ഞെടുപ്പാണ്. SSR സാഹചര്യങ്ങൾക്കായി ക്ലയിൻ്റിലും സെർവറിലും സ്ഥിരമായ ജനറേഷൻ ഉറപ്പാക്കാൻ ഓർമ്മിക്കുക.
• uuid: യുണീക്ക് ഐഡികൾ ജനറേറ്റ് ചെയ്യുന്നതിനുള്ള മറ്റൊരു ലൈബ്രറി. ഇത് nanoid-നേക്കാൾ ദൈർഘ്യമേറിയ ഐഡികൾ ജനറേറ്റ് ചെയ്യുന്നു, പക്ഷേ ഇത് ഇപ്പോഴും ഒരു പ്രായോഗിക ഓപ്ഷനാണ്. സമാനമായി, SSR സ്ഥിരത പരിഗണിക്കുക.
• സ്വന്തമായി നിർമ്മിക്കുക: പൊതുവെ ശുപാർശ ചെയ്യുന്നില്ലെങ്കിലും, നിങ്ങൾക്ക് സ്വന്തമായി ഐഡി ജനറേഷൻ ലോജിക് നടപ്പിലാക്കാം. എന്നിരുന്നാലും, ഇത് കൂടുതൽ സങ്കീർണ്ണവും പിശകുകൾക്ക് സാധ്യതയുള്ളതുമാണ്, പ്രത്യേകിച്ചും SSR, അക്സസ്സിബിലിറ്റി എന്നിവ കൈകാര്യം ചെയ്യുമ്പോൾ. പകരം nanoid അല്ലെങ്കിൽ uuid പോലുള്ള നന്നായി പരീക്ഷിച്ച ഒരു ലൈബ്രറി ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

useId-ഉം ടെസ്റ്റിംഗും

useId ഉപയോഗിക്കുന്ന കമ്പോണൻ്റുകൾ ടെസ്റ്റ് ചെയ്യുന്നതിന് ശ്രദ്ധാപൂർവ്വമായ പരിഗണന ആവശ്യമാണ്. ജനറേറ്റ് ചെയ്ത ഐഡികൾ ഡൈനാമിക് ആയതിനാൽ, നിങ്ങളുടെ ടെസ്റ്റുകളിൽ ഹാർഡ്‌കോഡ് ചെയ്ത മൂല്യങ്ങളെ ആശ്രയിക്കാൻ കഴിയില്ല.

useId മോക്ക് ചെയ്യൽ: ടെസ്റ്റിംഗിനിടെ useId ഹുക്ക് മോക്ക് ചെയ്യുക എന്നതാണ് ഒരു സമീപനം. ഹുക്ക് നൽകുന്ന മൂല്യം നിയന്ത്രിക്കാനും നിങ്ങളുടെ ടെസ്റ്റുകൾ ഡിറ്റർമിനിസ്റ്റിക് ആണെന്ന് ഉറപ്പാക്കാനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

            // Mock useId in your test file
jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useId: () => 'mock-id',
}));

// Your test
import MyComponent from './MyComponent';
import { render, screen } from '@testing-library/react';


describe('MyComponent', () => {
  it('should render with the mocked ID', () => {
    render(<MyComponent />);
    expect(screen.getByRole('textbox')).toHaveAttribute('id', 'mock-id');
  });
});

            

              
                Copy
              
            
          

data-testid ഉപയോഗിക്കൽ: പകരമായി, നിങ്ങളുടെ ടെസ്റ്റുകളിലെ എലമെൻ്റുകളെ ടാർഗെറ്റുചെയ്യാൻ data-testid ആട്രിബ്യൂട്ട് ഉപയോഗിക്കാം. ഈ ആട്രിബ്യൂട്ട് പ്രത്യേകമായി ടെസ്റ്റിംഗ് ആവശ്യങ്ങൾക്കായി രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്, ഇത് സ്ക്രീൻ റീഡറുകളോ മറ്റ് സഹായക സാങ്കേതികവിദ്യകളോ ഉപയോഗിക്കുന്നില്ല. മോക്ക് ചെയ്യുന്നതിനേക്കാൾ കുറഞ്ഞ കടന്നുകയറ്റമായതിനാൽ ഇത് പലപ്പോഴും തിരഞ്ഞെടുക്കപ്പെടുന്ന സമീപനമാണ്.

            // In your component
import React, { useId } from 'react';

function MyComponent() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Enter your name:</label>
      <input type="text" id={id} name="name" data-testid="name-input"/>
    </div>
  );
}

// Your test
import MyComponent from './MyComponent';
import { render, screen } from '@testing-library/react';

describe('MyComponent', () => {
  it('should render the input field', () => {
    render(<MyComponent />);
    expect(screen.getByTestId('name-input')).toBeInTheDocument();
  });
});

            

              
                Copy
              
            
          

കമ്പോണൻ്റ് ലൈബ്രറികളിൽ useId

കമ്പോണൻ്റ് ലൈബ്രറി രചയിതാക്കൾക്ക്, useId ഒരു ഗെയിം ചേഞ്ചറാണ്. ഉപഭോക്താക്കൾക്ക് ഐഡികൾ സ്വമേധയാ കൈകാര്യം ചെയ്യേണ്ട ആവശ്യമില്ലാതെ, അക്സസ്സിബിളും പുനരുപയോഗിക്കാവുന്നതുമായ കമ്പോണൻ്റുകൾ നിർമ്മിക്കാൻ ഇത് അനുവദിക്കുന്നു. ഇത് ലൈബ്രറി കമ്പോണൻ്റുകളെ വിവിധ ആപ്ലിക്കേഷനുകളിലേക്ക് സംയോജിപ്പിക്കുന്നത് വളരെ ലളിതമാക്കുകയും പ്രോജക്റ്റുകളിലുടനീളം സ്ഥിരമായ അക്സസ്സിബിലിറ്റി ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

ഉദാഹരണം: അക്കോർഡിയൻ കമ്പോണൻ്റ്

ഓരോ വിഭാഗത്തിനും ഹെഡിംഗിനും ഉള്ളടക്ക പാനലുകൾക്കും ഒരു യുണീക്ക് ഐഡി ആവശ്യമുള്ള ഒരു അക്കോർഡിയൻ കമ്പോണൻ്റ് പരിഗണിക്കുക. useId ഇത് ലളിതമാക്കുന്നു:

            import React, { useId, useState } from 'react';

function AccordionSection({ title, children }) {
  const id = useId();
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button
        id={`accordion-header-${id}`}
        aria-controls={`accordion-panel-${id}`}
        aria-expanded={isOpen}
        onClick={toggleOpen}
      >
        {title}
      </button>
      <div
        id={`accordion-panel-${id}`}
        aria-labelledby={`accordion-header-${id}`}
        hidden={!isOpen}
      >
        {children}
      </div>
    </div>
  );
}

export default AccordionSection;

            

              
                Copy
              
            
          

ഉപസംഹാരം

useId ഹുക്ക് റിയാക്റ്റിൻ്റെ ടൂൾകിറ്റിലെ ഒരു വിലയേറിയ കൂട്ടിച്ചേർക്കലാണ്, ഇത് യുണീക്കും സ്ഥിരവുമായ ഐഡികൾ ജനറേറ്റ് ചെയ്യുന്നതിനുള്ള ലളിതവും ഫലപ്രദവുമായ മാർഗ്ഗം നൽകുന്നു. useId ഉപയോഗിക്കുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് അവരുടെ ആപ്ലിക്കേഷനുകളുടെ അക്സസ്സിബിലിറ്റി മെച്ചപ്പെടുത്താനും സെർവർ-സൈഡ് റെൻഡറിംഗുമായി പൊരുത്തപ്പെടുന്നുവെന്ന് ഉറപ്പാക്കാനും കൂടുതൽ പുനരുപയോഗിക്കാവുന്ന കമ്പോണൻ്റുകൾ നിർമ്മിക്കാനും കഴിയും. അക്സസ്സിബിലിറ്റി കൂടുതൽ പ്രാധാന്യമർഹിക്കുന്നതിനാൽ, ഓരോ റിയാക്ട് ഡെവലപ്പർമാരുടെ പക്കലും ഉണ്ടായിരിക്കേണ്ട ഒരു ഉപകരണമാണ് useId.

useId-ഉം മറ്റ് അക്സസ്സിബിലിറ്റി മികച്ച രീതികളും സ്വീകരിക്കുന്നതിലൂടെ, എല്ലാ ഉപയോക്താക്കൾക്കും അവരുടെ കഴിവുകൾ പരിഗണിക്കാതെ തന്നെ, ഉൾക്കൊള്ളുന്നതും ഉപയോഗയോഗ്യവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിങ്ങൾക്ക് നിർമ്മിക്കാൻ കഴിയും.

കൂടുതൽ വിവരങ്ങൾക്കായി

• റിയാക്ട് useId ഡോക്യുമെൻ്റേഷൻ
• വെബ് അക്സസ്സിബിലിറ്റി ഇനിഷ്യേറ്റീവ് (WAI)
• MDN വെബ് ഡോക്സ്: അക്സസ്സിബിലിറ്റി