Reactã®experimental_useOptimisticããã¯ãããã©ãŒãã³ã¹ã«äžãã圱é¿ãšãã¹ã ãŒãºãªãŠãŒã¶ãŒäœéšãå®çŸããããã®ãªããã£ãã¹ãã£ãã¯æŽæ°åŠçéåºŠã®æé©åæŠç¥ã«ã€ããŠè§£èª¬ããŸãã
Reactã®experimental_useOptimisticã®ããã©ãŒãã³ã¹ïŒãªããã£ãã¹ãã£ãã¯æŽæ°ã®åŠçé床
Reactã®experimental_useOptimisticããã¯ã¯ããªããã£ãã¹ãã£ãã¯ïŒæ¥œèгçïŒæŽæ°ãæäŸããããšã§ããŠãŒã¶ãŒäœéšãåäžããã匷åãªæ¹æ³ã§ãããµãŒããŒã®ç¢ºèªãåŸ
ã€ä»£ããã«ãUIãå³åº§ã«æŽæ°ããããããç¬æã«ã¢ã¯ã·ã§ã³ãå®äºãããã®ãããªé¯èŠãäžããŸããããããäžé©åã«å®è£
ããããªããã£ãã¹ãã£ãã¯æŽæ°ã¯ãããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸãããã®èšäºã§ã¯ãexperimental_useOptimisticã®ããã©ãŒãã³ã¹ãžã®åœ±é¿ãæãäžããã¹ã ãŒãºã§å¿çæ§ã®é«ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã確ä¿ããããã®æŽæ°åŠçéåºŠã®æé©åæŠç¥ãæäŸããŸãã
ãªããã£ãã¹ãã£ãã¯æŽæ°ãšexperimental_useOptimisticã®çè§£
ãªããã£ãã¹ãã£ãã¯æŽæ°ãšã¯ãã¢ããªã±ãŒã·ã§ã³ãã¢ã¯ã·ã§ã³ã®æåãæ³å®ãããµãŒããŒããã®ç¢ºèªãåãåã*å*ã«UIãæŽæ°ããUIæè¡ã§ããããã«ãããäœæçãªå¿çæ§ãçãŸãããŠãŒã¶ãŒæºè¶³åºŠã倧å¹
ã«åäžããŸããexperimental_useOptimisticã¯ãReactã§ãã®ãã¿ãŒã³ã®å®è£
ãç°¡çŽ åããŸãã
åºæ¬çãªååã¯åçŽã§ããäœããã®ç¶æ
ããã®ç¶æ
ãããŒã«ã«ã§ïŒãªããã£ãã¹ãã£ãã¯ã«ïŒæŽæ°ãã颿°ããããŠãµãŒããŒäžã§å®éã®æŽæ°ãå®è¡ãã颿°ããããŸããexperimental_useOptimisticã¯ãå
ã®ç¶æ
ãšãªããã£ãã¹ãã£ãã¯æŽæ°é¢æ°ãåãåããUIã«è¡šç€ºãããæ°ããããªããã£ãã¹ãã£ãã¯ããªç¶æ
ãè¿ããŸãããµãŒããŒãæŽæ°ã確èªããïŒãŸãã¯ãšã©ãŒãçºçããïŒå Žåãå®éã®ç¶æ
ã«æ»ããŸãã
ãªããã£ãã¹ãã£ãã¯æŽæ°ã®äž»ãªå©ç¹ïŒ
- ãŠãŒã¶ãŒäœéšã®åäžïŒã¢ããªã±ãŒã·ã§ã³ãããéããå¿çæ§ãé«ããšæããããŸãã
- äœæçãªé å»¶ã®åæžïŒãµãŒããŒãªã¯ãšã¹ãã«äŒŽãåŸ ã¡æéããªãããŸãã
- ãšã³ã²ãŒãžã¡ã³ãã®åŒ·åïŒå³æã®ãã£ãŒãããã¯ãæäŸããããšã§ããŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãä¿é²ããŸãã
experimental_useOptimisticã«ãããããã©ãŒãã³ã¹ã®èæ ®äºé
experimental_useOptimisticã¯éåžžã«äŸ¿å©ã§ãããæœåšçãªããã©ãŒãã³ã¹ã®ããã«ããã¯ã«æ³šæããããšãéèŠã§ãã
1. é »ç¹ãªç¶æ æŽæ°ïŒ
ãã¹ãŠã®ãªããã£ãã¹ãã£ãã¯æŽæ°ã¯ãã³ã³ããŒãã³ããšãã®åã®åã¬ã³ããªã³ã°ãåŒãèµ·ãããŸããæŽæ°ãé »ç¹ãããããè€éãªèšç®ã䌎ãå Žåãããã©ãŒãã³ã¹ã®äœäžã«ã€ãªããå¯èœæ§ããããŸãã
äŸïŒå ±åããã¥ã¡ã³ããšãã£ã¿ãæ³åããŠãã ããããã¹ãŠã®ããŒã¹ãããŒã¯ããªããã£ãã¹ãã£ãã¯æŽæ°ãããªã¬ãŒãããšãã³ã³ããŒãã³ãã¯1ç§éã«æ°åååã¬ã³ããªã³ã°ãããå¯èœæ§ããããç¹ã«å€§ããªããã¥ã¡ã³ãã§ã¯é å»¶ãåŒãèµ·ããå¯èœæ§ããããŸãã
2. è€éãªæŽæ°ããžãã¯ïŒ
experimental_useOptimisticã«æäŸããæŽæ°é¢æ°ã¯ãå¯èœãªéã軜éã§ããã¹ãã§ããæŽæ°é¢æ°å
ã®è€éãªèšç®ãæäœã¯ããªããã£ãã¹ãã£ãã¯æŽæ°ããã»ã¹ãé
ãããå¯èœæ§ããããŸãã
äŸïŒãªããã£ãã¹ãã£ãã¯æŽæ°é¢æ°ãå€§èŠæš¡ãªããŒã¿æ§é ã®ãã£ãŒãã¯ããŒã³ãããŠãŒã¶ãŒå ¥åã«åºã¥ãé«ã³ã¹ããªèšç®ã䌎ãå Žåããªããã£ãã¹ãã£ãã¯æŽæ°ã¯é ããªãã广ãèããŸãã
3. 差忀åºïŒReconciliationïŒã®ãªãŒããŒãããïŒ
Reactã®å·®åæ€åºããã»ã¹ã¯ãæŽæ°ååŸã®ä»®æ³DOMãæ¯èŒããŠãå®éã®DOMãæŽæ°ããããã«å¿ èŠãªæå°éã®å€æŽã決å®ããŸããé »ç¹ãªãªããã£ãã¹ãã£ãã¯æŽæ°ã¯ãç¹ã«å€æŽã倧ããå Žåã差忀åºã®ãªãŒããŒããããå¢å ãããå¯èœæ§ããããŸãã
4. ãµãŒããŒã®å¿çæéïŒ
ãªããã£ãã¹ãã£ãã¯æŽæ°ã¯é å»¶ãé ããŸããããµãŒããŒã®å¿çãé ããšäŸç¶ãšããŠåé¡ã«ãªãå¯èœæ§ããããŸãããµãŒããŒãæŽæ°ã®ç¢ºèªãŸãã¯æåŠã«æéããããããããšããªããã£ãã¹ãã£ãã¯æŽæ°ãå ã«æ»ããããä¿®æ£ããããããéã«ããŠãŒã¶ãŒã¯äžèªç¶ãªç»é¢é·ç§»ãçµéšãããããããŸããã
experimental_useOptimisticã®ããã©ãŒãã³ã¹ãæé©åããæŠç¥
experimental_useOptimisticã䜿çšãããªããã£ãã¹ãã£ãã¯æŽæ°ã®ããã©ãŒãã³ã¹ãæé©åããããã®ããã€ãã®æŠç¥ã以äžã«ç€ºããŸãã
1. ãããŠã³ã¹ïŒDebouncingïŒãšã¹ããããªã³ã°ïŒThrottlingïŒïŒ
ãããŠã³ã¹ïŒäžå®ã®é å»¶ã®åŸãè€æ°ã®ã€ãã³ããåäžã®ã€ãã³ãã«ãŸãšããŸããããã¯ããŠãŒã¶ãŒå ¥åã«åºã¥ããŠæŽæ°ãé »ç¹ã«ããªã¬ãŒããããã®ãé¿ãããå Žåã«äŸ¿å©ã§ãã
ã¹ããããªã³ã°ïŒé¢æ°ãå®è¡ãããé »åºŠãå¶éããŸããããã«ãããæŽæ°ãæå®ãããééãããé »ç¹ã«ããªã¬ãŒãããªãããã«ããŸãã
äŸïŒãããŠã³ã¹ïŒïŒåè¿°ã®å ±åããã¥ã¡ã³ããšãã£ã¿ã®å ŽåããŠãŒã¶ãŒãã¿ã€ãã³ã°ã忢ããŠãã200ããªç§åŸã«ã®ã¿ãªããã£ãã¹ãã£ãã¯æŽæ°ãçºçããããã«ãããŠã³ã¹ããŸããããã«ãããåã¬ã³ããªã³ã°ã®åæ°ãå€§å¹ ã«åæžãããŸãã
import { debounce } from 'lodash';
import { experimental_useOptimistic, useState } from 'react';
function DocumentEditor() {
const [text, setText] = useState("Initial text");
const [optimisticText, setOptimisticText] = experimental_useOptimistic(text, (prevState, newText) => newText);
const debouncedSetOptimisticText = debounce((newText) => {
setOptimisticText(newText);
// ããã§ãµãŒããŒã«æŽæ°ãéä¿¡
sendUpdateToServer(newText);
}, 200);
const handleChange = (e) => {
const newText = e.target.value;
setText(newText); // å®éã®ç¶æ
ãå³åº§ã«æŽæ°
debouncedSetOptimisticText(newText); // ãªããã£ãã¹ãã£ãã¯æŽæ°ãã¹ã±ãžã¥ãŒã«
};
return (
);
}
äŸïŒã¹ããããªã³ã°ïŒïŒã»ã³ãµãŒããŒã¿ã§æŽæ°ããããªã¢ã«ã¿ã€ã ãã£ãŒããèããŠã¿ãŸããããUIãå§åããªãããã«ããªããã£ãã¹ãã£ãã¯æŽæ°ã1ç§ã«1å以äžã«ã¹ããããªã³ã°ããŸãã
2. ã¡ã¢åïŒ
React.memoã䜿çšããŠããªããã£ãã¹ãã£ãã¯ãªç¶æ
ãpropsãšããŠåãåãã³ã³ããŒãã³ãã®äžèŠãªåã¬ã³ããªã³ã°ãé²ããŸããReact.memoã¯propsãæµ
ãæ¯èŒããpropsã倿Žãããå Žåã«ã®ã¿ã³ã³ããŒãã³ããåã¬ã³ããªã³ã°ããŸãã
äŸïŒããã³ã³ããŒãã³ãããªããã£ãã¹ãã£ãã¯ãªããã¹ãã衚瀺ãããããpropãšããŠåãåãå Žåããã®ã³ã³ããŒãã³ããReact.memoã§ã©ããããŸããããã«ãããã³ã³ããŒãã³ãã¯ãªããã£ãã¹ãã£ãã¯ãªããã¹ããå®éã«å€æŽããããšãã«ã®ã¿åã¬ã³ããªã³ã°ãããããã«ãªããŸãã
import React from 'react';
const DisplayText = React.memo(({ text }) => {
console.log("DisplayText re-rendered");
return {text}
;
});
export default DisplayText;
3. ã»ã¬ã¯ã¿ãšç¶æ ã®æ£èŠåïŒ
ã»ã¬ã¯ã¿ïŒã»ã¬ã¯ã¿ïŒäŸïŒReselectã©ã€ãã©ãªïŒã䜿çšããŠããªããã£ãã¹ãã£ãã¯ãªç¶æ ããç¹å®ã®ããŒã¿ã掟çãããŸããã»ã¬ã¯ã¿ã¯æŽŸçããŒã¿ãã¡ã¢åã§ãããããç¶æ ã®å°ããªãµãã»ããã«ã®ã¿äŸåããã³ã³ããŒãã³ãã®äžèŠãªåã¬ã³ããªã³ã°ãé²ããŸãã
ç¶æ ã®æ£èŠåïŒç¶æ ãæ£èŠåãããæ¹æ³ã§æ§é åãããªããã£ãã¹ãã£ãã¯æŽæ°äžã«æŽæ°ããå¿ èŠãããããŒã¿ã®éãæå°éã«æããŸããæ£èŠåã«ã¯ãè€éãªãªããžã§ã¯ããããå°ããã管çããããéšåã«åå²ããç¬ç«ããŠæŽæ°ã§ããããã«ããããšãå«ãŸããŸãã
äŸïŒã¢ã€ãã ã®ãªã¹ããããã1ã€ã®ã¢ã€ãã ã®ã¹ããŒã¿ã¹ããªããã£ãã¹ãã£ãã¯ã«æŽæ°ããå Žåãã¢ã€ãã ãIDã§ããŒä»ãããããªããžã§ã¯ãã«æ ŒçŽããŠç¶æ ãæ£èŠåããŸããããã«ããããªã¹ãå šäœã§ã¯ãªãã倿Žãããç¹å®ã®ã¢ã€ãã ã®ã¿ãæŽæ°ã§ããŸãã
4. ã€ãã¥ãŒã¿ãã«ãªããŒã¿æ§é ïŒ
ã€ãã¥ãŒã¿ãã«ãªããŒã¿æ§é ïŒäŸïŒImmerã©ã€ãã©ãªïŒã䜿çšããŠãç¶æ ã®æŽæ°ãç°¡çŽ åããããã©ãŒãã³ã¹ãåäžãããŸããã€ãã¥ãŒã¿ãã«ãªããŒã¿æ§é ã¯ãæŽæ°ãæ¢åã®ãªããžã§ã¯ãã倿Žãã代ããã«æ°ãããªããžã§ã¯ããäœæããããšãä¿èšŒãã倿Žã®æ€åºãšåã¬ã³ããªã³ã°ã®æé©åã容æã«ããŸãã
äŸïŒImmerã䜿çšãããšãå ã®ç¶æ ã誀ã£ãŠå€æŽããããšãå¿é ããã«ããªããã£ãã¹ãã£ãã¯æŽæ°é¢æ°å ã§å€æŽãããç¶æ ã®ã³ããŒãç°¡åã«äœæã§ããŸãã
import { useImmer } from 'use-immer';
import { experimental_useOptimistic } from 'react';
function ItemList() {
const [items, updateItems] = useImmer([
{ id: 1, name: "Item A", status: "pending" },
{ id: 2, name: "Item B", status: "completed" },
]);
const [optimisticItems, setOptimisticItems] = experimental_useOptimistic(
items,
(prevState, itemId) => {
return prevState.map((item) =>
item.id === itemId ? { ...item, status: "processing" } : item
);
}
);
const handleItemClick = (itemId) => {
setOptimisticItems(itemId);
// ãµãŒããŒã«æŽæ°ãéä¿¡
sendUpdateToServer(itemId);
};
return (
{optimisticItems.map((item) => (
- handleItemClick(item.id)}>
{item.name} - {item.status}
))}
);
}
5. éåææäœãšäžŠè¡åŠçïŒ
Web Workerãéåæé¢æ°ã䜿çšããŠãèšç®ã³ã¹ãã®é«ãã¿ã¹ã¯ãããã¯ã°ã©ãŠã³ãã¹ã¬ããã«ãªãããŒãããŸããããã«ãããã¡ã€ã³ã¹ã¬ããã®ããããã³ã°ãé²ãããªããã£ãã¹ãã£ãã¯æŽæ°äžãUIã®å¿çæ§ãç¶æããŸãã
äŸïŒãªããã£ãã¹ãã£ãã¯æŽæ°é¢æ°ã«è€éãªããŒã¿å€æãå«ãŸããå Žåããã®å€æããžãã¯ãWeb Workerã«ç§»åããŸããWeb Workerã¯ããã¯ã°ã©ãŠã³ãã§å€æãå®è¡ããæŽæ°ãããããŒã¿ãã¡ã€ã³ã¹ã¬ããã«éãè¿ãããšãã§ããŸãã
6. ä»®æ³åïŒ
å€§èŠæš¡ãªãªã¹ããããŒãã«ã®å Žåãä»®æ³åæè¡ã䜿çšããŠç»é¢ã«è¡šç€ºãããŠããã¢ã€ãã ã®ã¿ãã¬ã³ããªã³ã°ããŸããããã«ããããªããã£ãã¹ãã£ãã¯æŽæ°äžã«å¿ èŠãªDOMæäœã®éãå€§å¹ ã«åæžãããããã©ãŒãã³ã¹ãåäžããŸãã
äŸïŒreact-windowãreact-virtualizedã®ãããªã©ã€ãã©ãªã䜿çšãããšããã¥ãŒããŒãå ã«çŸåšè¡šç€ºãããŠããã¢ã€ãã ã®ã¿ãã¬ã³ããªã³ã°ããããšã§ãå€§èŠæš¡ãªãªã¹ããå¹ççã«ã¬ã³ããªã³ã°ã§ããŸãã
7. ã³ãŒãåå²ïŒ
ã¢ããªã±ãŒã·ã§ã³ãããå°ããªãã£ã³ã¯ã«åå²ãããªã³ããã³ãã§ããŒãã§ããããã«ããŸããããã«ãããåæããŒãæéãççž®ããããªããã£ãã¹ãã£ãã¯æŽæ°ã®ããã©ãŒãã³ã¹ãå«ãã¢ããªã±ãŒã·ã§ã³å šäœã®ããã©ãŒãã³ã¹ãåäžããŸãã
äŸïŒReact.lazyãšSuspenseã䜿çšããŠãã³ã³ããŒãã³ããå¿ èŠãªãšãã«ã®ã¿ããŒãããŸããããã«ãããåæããŒãžããŒãæã«è§£æããã³å®è¡ããå¿ èŠãããJavaScriptã®éãåæžãããŸãã
8. ãããã¡ã€ãªã³ã°ãšã¢ãã¿ãªã³ã°ïŒ
React DevToolsããã®ä»ã®ãããã¡ã€ãªã³ã°ããŒã«ã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ããã«ããã¯ãç¹å®ããŸãããªããã£ãã¹ãã£ãã¯æŽæ°ã®ããã©ãŒãã³ã¹ãç£èŠããæŽæ°æéãåã¬ã³ããªã³ã°åæ°ãã¡ã¢ãªäœ¿çšéãªã©ã®ã¡ããªã¯ã¹ã远跡ããŸãã
äŸïŒReact Profilerã¯ãã©ã®ã³ã³ããŒãã³ããäžå¿ èŠã«åã¬ã³ããªã³ã°ãããŠããããã©ã®æŽæ°é¢æ°ãå®è¡ã«æãæéãããã£ãŠããããç¹å®ããã®ã«åœ¹ç«ã¡ãŸãã
åœéçãªèæ ®äºé
ã°ããŒãã«ãªãŠãŒã¶ãŒåãã«experimental_useOptimisticãæé©åããéã«ã¯ã以äžã®ç¹ã«çæããŠãã ããã
- ãããã¯ãŒã¯é å»¶ïŒç°ãªãå°ççãªå Žæã«ãããŠãŒã¶ãŒã¯ãããŸããŸãªãããã¯ãŒã¯é å»¶ãçµéšããŸããããé«ãé å»¶ã§ããªããã£ãã¹ãã£ãã¯æŽæ°ãååãªã¡ãªãããæäŸã§ããããã«ããŠãã ãããããªãã§ãããªã©ã®æè¡ã䜿çšããŠé å»¶ã®åé¡ã軜æžããããšãæ€èšããŠãã ããã
- ããã€ã¹ã®èœåïŒãŠãŒã¶ãŒã¯ãåŠçèœåãç°ãªãããŸããŸãªããã€ã¹ã§ã¢ããªã±ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ããå¯èœæ§ããããŸããããŒãšã³ãããã€ã¹ã§ãããã©ãŒãã³ã¹ãè¯ãããã«ããªããã£ãã¹ãã£ãã¯æŽæ°ããžãã¯ãæé©åããŠãã ãããããã€ã¹ã®èœåã«åºã¥ããŠã¢ããªã±ãŒã·ã§ã³ã®ç°ãªãããŒãžã§ã³ãæäŸããã¢ãããã£ãããŒãã£ã³ã°æè¡ã䜿çšããŠãã ããã
- ããŒã¿ã®ããŒã«ã©ã€ãºïŒããŒã«ã©ã€ãºãããããŒã¿ïŒæ¥ä»ãéè²šãæ°å€ãªã©ïŒãå«ããªããã£ãã¹ãã£ãã¯æŽæ°ã衚瀺ããéã«ã¯ãæŽæ°ããŠãŒã¶ãŒã®ãã±ãŒã«ã«åãããŠæ£ãããã©ãŒããããããŠããããšã確èªããŠãã ããã
i18nextã®ãããªåœéåã©ã€ãã©ãªã䜿çšããŠããŒã¿ã®ããŒã«ã©ã€ãºãåŠçããŠãã ããã - ã¢ã¯ã»ã·ããªãã£ïŒãªããã£ãã¹ãã£ãã¯æŽæ°ãé害ãæã€ãŠãŒã¶ãŒã«ãã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ãããã¢ã¯ã·ã§ã³ãé²è¡äžã§ããããšã瀺ãæç¢ºãªèŠèŠçåå³ãæäŸããã¢ã¯ã·ã§ã³ãæåãŸãã¯å€±æãããšãã«é©åãªãã£ãŒãããã¯ãæäŸããŠãã ãããARIA屿§ã䜿çšããŠããªããã£ãã¹ãã£ãã¯æŽæ°ã®ã¢ã¯ã»ã·ããªãã£ãåäžãããŠãã ããã
- ã¿ã€ã ãŸãŒã³ïŒæéäŸåã®ããŒã¿ïŒã¹ã±ãžã¥ãŒã«ãäºçŽãªã©ïŒãæ±ãã¢ããªã±ãŒã·ã§ã³ã§ã¯ããªããã£ãã¹ãã£ãã¯æŽæ°ã衚瀺ããéã«ã¿ã€ã ãŸãŒã³ã®éãã«æ³šæããŠãã ãããæ£ç¢ºãªè¡šç€ºã確ä¿ããããã«ãæéããŠãŒã¶ãŒã®ããŒã«ã«ã¿ã€ã ãŸãŒã³ã«å€æããŠãã ããã
å®è·µçãªäŸãšã·ããªãª
1. Eã³ããŒã¹ã¢ããªã±ãŒã·ã§ã³ïŒ
Eã³ããŒã¹ã¢ããªã±ãŒã·ã§ã³ã§ã¯ãã·ã§ããã³ã°ã«ãŒãã«ååã远å ããéã«ãªããã£ãã¹ãã£ãã¯æŽæ°ãéåžžã«åœ¹ç«ã¡ãŸãããŠãŒã¶ãŒããã«ãŒãã«è¿œå ããã¿ã³ãã¯ãªãã¯ãããšããµãŒããŒã远å ã確èªããã®ãåŸ ããã«ãååã¯ããã«ã«ãŒã衚瀺ã«è¿œå ãããŸããããã«ãããããéããå¿çæ§ã®é«ãäœéšãæäŸãããŸãã
å®è£ ïŒ
import { experimental_useOptimistic, useState } from 'react';
function ProductCard({ product }) {
const [cartItems, setCartItems] = useState([]);
const [optimisticCartItems, setOptimisticCartItems] = experimental_useOptimistic(
cartItems,
(prevState, productId) => [...prevState, productId]
);
const handleAddToCart = (productId) => {
setOptimisticCartItems(productId);
// ã«ãŒã远å ãªã¯ãšã¹ãããµãŒããŒã«éä¿¡
sendAddToCartRequest(productId);
};
return (
{product.name}
{product.price}
ã«ãŒãå
ã®ååæ°ïŒ{optimisticCartItems.length}
);
}
2. ãœãŒã·ã£ã«ã¡ãã£ã¢ã¢ããªã±ãŒã·ã§ã³ïŒ
ãœãŒã·ã£ã«ã¡ãã£ã¢ã¢ããªã±ãŒã·ã§ã³ã§ã¯ãæçš¿ã«ããããïŒããããããã¡ãã»ãŒãžãéä¿¡ãããããéã«ãªããã£ãã¹ãã£ãã¯æŽæ°ã§åŒ·åã§ããŸãããŠãŒã¶ãŒãããããïŒããã¿ã³ãã¯ãªãã¯ãããšããµãŒããŒã®ç¢ºèªãåŸ ããã«ããããïŒãã®æ°ãããã«ã€ã³ã¯ãªã¡ã³ããããŸããåæ§ã«ããŠãŒã¶ãŒãã¡ãã»ãŒãžãéä¿¡ãããšãã¡ãã»ãŒãžã¯ããã«ãã£ãããŠã£ã³ããŠã«è¡šç€ºãããŸãã
3. ã¿ã¹ã¯ç®¡çã¢ããªã±ãŒã·ã§ã³ïŒ
ã¿ã¹ã¯ç®¡çã¢ããªã±ãŒã·ã§ã³ã§ã¯ãã¿ã¹ã¯ãå®äºãšããŠããŒã¯ãããããŠãŒã¶ãŒã«ã¿ã¹ã¯ãå²ãåœãŠããããéã«ãªããã£ãã¹ãã£ãã¯æŽæ°ã§æ¹åã§ããŸãããŠãŒã¶ãŒãã¿ã¹ã¯ãå®äºãšããŠããŒã¯ãããšãã¿ã¹ã¯ã¯UIã§ããã«å®äºãšããŠããŒã¯ãããŸãããŠãŒã¶ãŒãå¥ã®ãŠãŒã¶ãŒã«ã¿ã¹ã¯ãå²ãåœãŠããšãã¿ã¹ã¯ã¯ããã«å²ãåœãŠããããŠãŒã¶ãŒã®ã¿ã¹ã¯ãªã¹ãã«è¡šç€ºãããŸãã
çµè«
experimental_useOptimisticã¯ãReactã¢ããªã±ãŒã·ã§ã³ã§å¿çæ§ãé«ããé
åçãªãŠãŒã¶ãŒäœéšãåµé ããããã®åŒ·åãªããŒã«ã§ãããªããã£ãã¹ãã£ãã¯æŽæ°ã®ããã©ãŒãã³ã¹ãžã®åœ±é¿ãçè§£ãããã®èšäºã§æŠèª¬ããæé©åæŠç¥ãå®è£
ããããšã§ããªããã£ãã¹ãã£ãã¯æŽæ°ã广çãã€é«æ§èœã§ããããšãä¿èšŒã§ããŸããã¢ããªã±ãŒã·ã§ã³ã®ãããã¡ã€ãªã³ã°ãããã©ãŒãã³ã¹ã¡ããªã¯ã¹ã®ç£èŠããããŠã¢ããªã±ãŒã·ã§ã³ãšã°ããŒãã«ãªãŠãŒã¶ãŒã®ç¹å®ã®ããŒãºã«åãããŠæé©åæè¡ãé©å¿ãããããšãå¿ããªãã§ãã ãããããã©ãŒãã³ã¹ãšã¢ã¯ã»ã·ããªãã£ã«çŠç¹ãåœãŠãããšã§ãäžçäžã®ãŠãŒã¶ãŒã«åªãããŠãŒã¶ãŒäœéšãæäŸã§ããŸãã