createRoot

const root = createRoot(domNode, options?)

• Referans
  • createRoot(domNode, options?)
  • root.render(reactNode)
  • root.unmount()
• Kullanım
  • Tamamen React ile oluşturulmuş bir uygulamayı render etmek
  • Kısmen React ile oluşturulan bir sayfa render etmek
  • Bir kök bileşenin güncellenmesi
  • Show a dialog for uncaught errors
  • Displaying Error Boundary errors
  • Displaying a dialog for recoverable errors
• Sorun Giderme
  • Bir kök oluşturdum, fakat hiçbir şey görüntülenmiyor.
  • I’m getting an error: “You passed a second argument to root.render”
  • Bir hata alıyorum: “Hedef kapsayıcı bir DOM öğesi değil”
  • Bir hata alıyorum: “Fonksiyonlar bir React alt elemanı olarak geçerli değildir.”
  • Sunucu tarafından render edilen HTML’im sıfırdan yeniden oluşturuluyor

Referans

createRoot(domNode, options?)

İçeriği bir tarayıcı DOM elemanı içinde görüntülemek üzere bir React kökü oluşturmak için createRoot çağrısı yapın.

import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

React, domNode için bir kök oluşturacak ve içindeki DOM’un yönetimini üstlenecek. Bir kök oluşturduktan sonra, içinde bir React bileşeni görüntülemek için root.render çağırmanız gerekir:

root.render(<App />);

Tamamen React ile oluşturulmuş bir uygulama genellikle kök bileşeni için yalnızca bir createRoot çağrısına sahip olacaktır. Sayfanın bazı bölümleri için React “serpintileri” kullanan bir sayfa, ihtiyaç duyulan kadar çok sayıda ayrı köke sahip olabilir.

Daha fazla örnek için aşağıya bakın.

Parametreler

• domNode: Bir DOM elemanı. React bu DOM elemanı için bir kök oluşturacak ve render gibi render edilmiş React içeriğini görüntülemek için kök üzerinde fonksiyonlar çağırmanıza izin verecektir.

• opsiyonel options: Bu React kökü için seçenekler içeren bir nesne.

  • Canary only optional onCaughtError: Callback called when React catches an error in an Error Boundary. Called with the error caught by the Error Boundary, and an errorInfo object containing the componentStack.
  • Canary only optional onUncaughtError: Callback called when an error is thrown and not caught by an Error Boundary. Called with the error that was thrown, and an errorInfo object containing the componentStack.
  • optional onRecoverableError: React’in hatalardan otomatik olarak kurtulduğunda çağrılan callback fonksiyonu. Called with an error React throws, and an errorInfo object containing the componentStack. Some recoverable errors may include the original error cause as error.cause.
  • opsiyonel identifierPrefix: useId tarafından oluşturulan kimlikler için React’in kullandığı bir dize öneki. Aynı sayfada birden fazla kök kullanırken çakışmaları önlemek için kullanışlıdır.

Döndürülenler

createRoot render ve unmount olmak üzere iki yöntem içeren bir nesne döndürür.

Uyarılar

• Uygulamanız sunucu tarafından oluşturulmuşsa, createRoot() kullanımı desteklenmez. Bunun yerine hydrateRoot() kullanın.
• Uygulamanızda muhtemelen yalnızca bir createRoot çağrısı olacaktır. Eğer bir çatı kullanıyorsanız, bu çağrıyı sizin için yapabilir.
• Bileşeninizin alt öğesi olmayan DOM ağacının farklı bir bölümünde bir JSX parçası render etmek istediğinizde (örneğin, bir modal veya bir araç ipucu), createRoot yerine createPortal kullanın.

root.render(reactNode)

React root’un tarayıcı DOM düğümünde bir JSX parçası görüntülemek için root.render çağrısı yapın.

root.render(<App />);

React, root içinde <App /> gösterecek ve içindeki DOM’un yönetimini üstlenecektir.

Daha fazla örnek için aşağıya bakın.

Parametreler

• reactNode: Görüntülemek istediğiniz bir React düğümü. Bu genellikle <App /> gibi bir JSX parçası olacaktır, ancak createElement() ile oluşturulmuş bir React elemanı, bir string, bir sayı, null veya undefined da iletebilirsiniz.

Döndürülenler

root.render undefined değerini döndürür.

Uyarılar

• İlk kez root.render fonksiyonunu çağırdığınız zaman React, React bileşenini render etmeden önce React kökü içindeki mevcut tüm HTML içeriğini temizleyecektir.

• Kök DOM düğümünüz sunucuda veya derleme sırasında React tarafından oluşturulan HTML içeriyorsa, bunun yerine olay işleyicilerini mevcut HTML’ye ekleyen hydrateRoot() fonksiyonunu kullanın.

• Aynı kök üzerinde birden fazla kez render çağrısı yaparsanız, React ilettiğiniz en son JSX’i yansıtmak için DOM’u gerektiği gibi güncelleyecektir. React, DOM’un hangi bölümlerinin yeniden kullanılabileceğine ve hangilerinin yeniden oluşturulması gerektiğine daha önce oluşturulmuş ağaçla “eşleştirerek” daha önce oluşturulmuş ağaçla karar verecektir. Aynı kök üzerinde render fonksiyonunu tekrar çağırmak, kök bileşen üzerinde set fonksiyonunu çağırmaya benzer: React gereksiz DOM güncellemelerinden kaçınır.

root.unmount()

React kökü içinde render edilmiş bir ağacı yok etmek için root.unmount çağırın.

root.unmount();

Tamamen React ile oluşturulan bir uygulamada genellikle root.unmount çağrısı olmayacaktır.

Bu, çoğunlukla React kök DOM düğümünüzün (veya atalarından herhangi birinin) başka bir kod tarafından DOM’dan kaldırılabileceği durumlarda kullanışlıdır. Örneğin, etkin olmayan sekmeleri DOM’dan kaldıran bir jQuery sekme paneli düşünün. Bir sekme kaldırılırsa, içindeki her şey (içindeki React kökleri de dahil olmak üzere) DOM’dan da kaldırılacaktır. Bu durumda, React’e root.unmount çağrısı yaparak kaldırılan kökün içeriğini yönetmeyi “durdurmasını” söylemeniz gerekir. Aksi takdirde, kaldırılan kökün içindeki bileşenler, abonelikler gibi global kaynakları temizlemeyi ve boşaltmayı bilemez.

root.unmount çağrısı, ağaçtaki tüm olay yöneticilerini veya state’i kaldırmak da dahil olmak üzere, kökteki tüm bileşenleri DOM’dan kaldıracak ve React’i kök DOM düğümünden “ayıracaktır”.

Parametreler

root.unmount herhangi bir parametre kabul etmez.

Döndürülenler

root.unmount undefined döndürür.

Uyarılar

• root.unmount çağrısı, ağaçtaki tüm bileşenleri DOM’dan kaldıracak ve React’i kök DOM düğümünden “ayıracaktır”.

• Bir kez root.unmount çağrısı yaptığınızda, aynı kök üzerinde tekrar root.render çağrısı yapamazsınız. Bağlanmamış bir kök üzerinde root.render çağrılmaya çalışıldığında “Bağlanmamış bir kök güncellenemiyor” hatası verilir. Ancak, aynı DOM düğümü için önceki kökün bağlantısı kaldırıldıktan sonra yeni bir kök oluşturabilirsiniz.

Kullanım

Tamamen React ile oluşturulmuş bir uygulamayı render etmek

Eğer uygulamanız tamamen React ile oluşturulmuşsa, uygulamanızın tamamı için tek bir kök oluşturun.

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Genellikle bu kodu başlangıçta yalnızca bir kez çalıştırmanız gerekir. Bu işlem şunları yapacaktır:

1. HTML’nizde tanımlanan tarayıcı DOM düğümünü bulun.
2. Uygulamanızın React bileşenini içinde görüntüleyin.

Eğer uygulamanız tamamen React ile oluşturulmuşsa, daha fazla kök oluşturmanız veya root.render’ı tekrar çağırmanız gerekmez.

Bu noktadan itibaren React tüm uygulamanızın DOM’unu yönetecektir. Daha fazla bileşen eklemek için, bunları App bileşeninin içine yerleştirin. Kullanıcı arayüzünü güncellemeniz gerektiğinde, bileşenlerinizin her biri bunu state kullanarak yapabilir. DOM düğümünün dışında bir modal veya araç ipucu gibi ekstra içerik görüntülemeniz gerektiğinde, bunu bir portal ile oluşturun.

<div id="root"></div>

Kısmen React ile oluşturulan bir sayfa render etmek

Sayfanız tamamen React ile oluşturulmamışsa, React tarafından yönetilen her bir üst düzey kullanıcı arayüzü parçası için bir kök oluşturmak üzere createRoot öğesini birden çok kez çağırabilirsiniz. Her kökte root.render çağrısı yaparak her kökte farklı içerikler görüntüleyebilirsiniz.

Burada, index.html dosyasında tanımlanan iki farklı DOM düğümüne iki farklı React bileşeni render edilmiştir:

Ayrıca document.createElement() ile yeni bir DOM düğümü oluşturabilir ve bunu dokümana manuel olarak ekleyebilirsiniz.

const domNode = document.createElement('div');
const root = createRoot(domNode);
root.render(<Comment />);
document.body.appendChild(domNode); // Dokümanın herhangi bir yerine ekleyebilirsiniz

React ağacını DOM düğümünden kaldırmak ve onun tarafından kullanılan tüm kaynakları temizlemek için root.unmount. çağırın.

root.unmount();

Bu, çoğunlukla React bileşenleriniz farklı bir çatıda yazılmış bir uygulamanın içindeyse kullanışlıdır.

Bir kök bileşenin güncellenmesi

Aynı kök üzerinde render fonksiyonunu birden fazla kez çağırabilirsiniz. Önceki render edilen ile bileşen ağaç yapısı eşleştiği sürece, React state’i koruyacaktır.. Bu örnekte her saniyede tekrarlanan render çağrılarından kaynaklanan güncellemelerin yıkıcı olmadığına dikkat edin. Örneğin girdi kutusuna yazı yazıyorsunuz:

Birden fazla kez render çağrısı yapmak nadirdir. Genellikle bileşenleriniz bunun yerine state güncellemesi yapacaktır.

Show a dialog for uncaught errors

By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional onUncaughtError root option:

import { createRoot } from 'react-dom/client';

const root = createRoot(
  document.getElementById('root'),
  {
    onUncaughtError: (error, errorInfo) => {
      console.error(
        'Uncaught error',
        error,
        errorInfo.componentStack
      );
    }
  }
);
root.render(<App />);

The onUncaughtError option is a function called with two arguments:

1. The error that was thrown.
2. An errorInfo object that contains the componentStack of the error.

You can use the onUncaughtError root option to display error dialogs:

Displaying Error Boundary errors

By default, React will log all errors caught by an Error Boundary to console.error. To override this behavior, you can provide the optional onCaughtError root option to handle errors caught by an Error Boundary:

import { createRoot } from 'react-dom/client';

const root = createRoot(
  document.getElementById('root'),
  {
    onCaughtError: (error, errorInfo) => {
      console.error(
        'Caught error',
        error,
        errorInfo.componentStack
      );
    }
  }
);
root.render(<App />);

The onCaughtError option is a function called with two arguments:

1. The error that was caught by the boundary.
2. An errorInfo object that contains the componentStack of the error.

You can use the onCaughtError root option to display error dialogs or filter known errors from logging:

Displaying a dialog for recoverable errors

React may automatically render a component a second time to attempt to recover from an error thrown in render. If successful, React will log a recoverable error to the console to notify the developer. To override this behavior, you can provide the optional onRecoverableError root option:

import { createRoot } from 'react-dom/client';

const root = createRoot(
  document.getElementById('root'),
  {
    onRecoverableError: (error, errorInfo) => {
      console.error(
        'Recoverable error',
        error,
        error.cause,
        errorInfo.componentStack,
      );
    }
  }
);
root.render(<App />);

The onRecoverableError option is a function called with two arguments:

1. The error that React throws. Some errors may include the original cause as error.cause.
2. An errorInfo object that contains the componentStack of the error.

You can use the onRecoverableError root option to display error dialogs:

Sorun Giderme

Bir kök oluşturdum, fakat hiçbir şey görüntülenmiyor.

Uygulamanızı kök içine gerçekten render etmeyi unutmadığınızdan emin olun:

import { createRoot } from 'react-dom/client';
import App from './App.js';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Bunu yapana kadar hiçbir şey görüntülenmez.

I’m getting an error: “You passed a second argument to root.render”

A common mistake is to pass the options for createRoot to root.render(...):

To fix, pass the root options to createRoot(...), not root.render(...):

// 🚩 Wrong: root.render only takes one argument.
root.render(App, {onUncaughtError});

// ✅ Correct: pass options to createRoot.
const root = createRoot(container, {onUncaughtError}); 
root.render(<App />);

Bir hata alıyorum: “Hedef kapsayıcı bir DOM öğesi değil”

Bu hata, createRoot öğesine aktardığınız şeyin bir DOM düğümü olmadığı anlamına gelir.

Ne olduğundan emin değilseniz, yazdırmayı(log) deneyin:

const domNode = document.getElementById('root');
console.log(domNode); // ???
const root = createRoot(domNode);
root.render(<App />);

Örneğin, domNode null ise, getElementById null döndürmüş demektir. Bu, çağrınız sırasında dokümanda verilen kimliğe sahip bir düğüm yoksa gerçekleşir. Bunun birkaç nedeni olabilir:

1. Aradığınız ID, HTML dosyasında kullandığınız ID’den farklı olabilir. Yazım hatalarını kontrol edin!
2. Paketinizin <script> etiketi, HTML’de kendisinden sonra görünen herhangi bir DOM düğümünü “göremez”.

Bu hatayı almanın bir başka yaygın yolu da createRoot(domNode) yerine createRoot(<App />) yazmaktır.

Bir hata alıyorum: “Fonksiyonlar bir React alt elemanı olarak geçerli değildir.”

Bu hata, root.rendera aktardığınız şeyin bir React bileşeni olmadığı anlamına gelir.

Bu, root.render öğesini <Component /> yerine Component ile çağırırsanız meydana gelebilir:

// 🚩 Yanlış: App bir fonksiyondur, Bileşen değildir.
root.render(App);

// ✅ Doğru: <App /> bir bileşendir.
root.render(<App />);

Veya root.render’a fonksiyonu çağırmanın sonucu yerine fonksiyonun kendisini iletirseniz:

// 🚩 Yanlış: createApp bir fonksiyondur, bileşen değildir.
root.render(createApp);

// ✅ Doğru: Bir bileşen döndürmek için createApp'i çağırın.
root.render(createApp());

Sunucu tarafından render edilen HTML’im sıfırdan yeniden oluşturuluyor

Uygulamanız sunucu tarafından render ediliyorsa ve React tarafından oluşturulan ilk HTML’yi içeriyorsa, bir kök oluşturmanın ve root.render çağrısının tüm bu HTML’yi sildiğini ve ardından tüm DOM düğümlerini sıfırdan yeniden oluşturduğunu fark edebilirsiniz. Bu daha yavaş olabilir, odak ve kaydırma konumlarını sıfırlayabilir ve diğer kullanıcı girdilerini kaybedebilir.

Sunucu tarafından render edilen uygulamalar createRoot yerine hydrateRoot kullanmalıdır:

import { hydrateRoot } from 'react-dom/client';
import App from './App.js';

hydrateRoot(
  document.getElementById('root'),
  <App />
);

API’sinin farklı olduğunu unutmayın. Özellikle, başka bir root.render çağrısı genellikle gerçekleşmeyecektir.