きるこの日記帳

html

<!-- id が inputFoo の要素を参照している label -->
<label for="inputFoo">Foo</label>

<!-- id に inputFoo を持つ要素が DOM にないと label はエラー -->
<input id="inputFoo" type="text" />

InputField.tsx

import * as React from 'react'

type Props = {
  label: string
  handleChangeText: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export const InputSample: React.FC<Props> = props => {
  return (
    <>
      <label htmlFor="inputSample">{props.label}</label>
      <input id="inputSample" name="inputSample" type="text" />
    </>
  )
}

pages/index.tsx

{/* どうして uid を渡さないといけないんですか？ */}
<InputSample uid={'input1'} />

InputField.tsx

/* ----------省略---------- */
export const InputSample: React.FC<Props> = props => {
  const uid = React.useMemo(() => uuid.v4(), [])
  return (
    <>
      <label htmlFor={uid}>{props.label}</label>
      <input id={uid} name="inputSample" type="text" />
    </>
  )
}

InputField.tsx

import * as React from 'react'

let count = 0 // カウント

export const InputSample: React.FC<Props> = props => {
  const uid = `uid_${count++}` // リロードでずれる

  return (
    <>
      <label htmlFor={uid}>{props.label}</label>
      <input id={uid} name="inputSample" type="text" />
    </>
  )
}

Server-side_friendly_UID

import {UIDReset, UIDConsumer} from 'react-uid';

<UIDReset>
    <UIDConsumer>
        {(id,uid) => (
          <Fragment>
            <input id={id} />
            <label htmlFor={id} />
            data.map( item => <li key={uid(item)}>{item}</li>)
          </Fragment> 
        )}
    </UIDConsumer>
</UIDReset>

shell

npm install react@experimental react-dom@experimental

foo.tsx

const Foo: React.FC = (props) => {
// @ts-ignore
const uid = React.unstable_useOpaqueIdentifier()

return <p id={uid}>props.children</p>
}

packages/react-dom/src/server/ReactPartialRendererHooks.js

function useOpaqueIdentifier(): OpaqueIDType {
  return (
    (currentPartialRenderer.identifierPrefix || '') +
    'R:' +
    (currentPartialRenderer.uniqueID++).toString(36)
  );
}

packages/react-dom/src/client/ReactDOMHostConfig.js

let clientId: number = 0;
export function makeClientId(): OpaqueIDType {
  return 'r:' + (clientId++).toString(36);
}

packages/react-dom/src/client/ReactDOMHostConfig.js

export function makeOpaqueHydratingObject(
  attemptToReadValue: () => void,
): OpaqueIDType {
  return {
    $$typeof: REACT_OPAQUE_ID_TYPE,
    toString: attemptToReadValue,
    valueOf: attemptToReadValue,
  };
}

ReactFiberHooks.new.js

// ここで生成
const makeId = __DEV__
  ? makeClientIdInDEV.bind(
      null,
      warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber),
    )
  : makeClientId;
    
if (getIsHydrating()) {
  /* --------省略-------- */
} else {
  // `makeClientId` をセットして return する
  const id = makeId();
  mountState(id);
  return id;
}

ReactFiberHooks.new.js

if (getIsHydrating()) {
  let didUpgrade = false;
  const fiber = currentlyRenderingFiber;
  const readValue = () => {
    if (!didUpgrade) {
      // Only upgrade once. This works even inside the render phase because
      // the update is added to a shared queue, which outlasts the
      // in-progress render.
      didUpgrade = true;
      if (__DEV__) {
      isUpdatingOpaqueValueInRenderPhase = true;
      setId(makeId());
      isUpdatingOpaqueValueInRenderPhase = false;
      warnOnOpaqueIdentifierAccessInDEV(fiber);
      } else {
        setId(makeId());
      }
    }
    // throw する
    invariant(
      false,
      'The object passed back from useOpaqueIdentifier is meant to be ' +
      'passed through to attributes only. Do not read the value directly.',
    );
  };
  /* 続く */

ReactFiberHooks.new.js

  /* 上のコードの続き */

  // OpaqueHydratingObject
  const id = makeOpaqueHydratingObject(readValue);

  // setState
  const setId = mountState(id)[1];
  
  // Legacy Mode なら useEffect のような操作をして setID を実行
  if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
    currentlyRenderingFiber.effectTag |= UpdateEffect | PassiveEffect;
    pushEffect(
      HookHasEffect | HookPassive,
      () => {
        setId(makeId());
      },
      undefined,
      null,
    );
  }
  return id;
}

packages/react-dom/src/client/ReactDOMHostConfig.js

invariant(
  false,
  'The object passed back from useOpaqueIdentifier is meant to be ' +
  'passed through to attributes only. Do not read the value directly.',
);

packages/react-dom/src/client/ReactDOMHostConfig.js

export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
  const id = 'r:' + (clientId++).toString(36);
  return {
    // 勝手に文字列にしたら怒られる
    toString() {
      warnOnAccessInDEV();
      return id;
    },
    valueOf() {
      warnOnAccessInDEV();
      return id;
    },
  };
}

packages/react-dom/src/client/ReactDOMComponent.jsより

else if (
  typeof nextProp === 'object' &&
  nextProp !== null &&
  nextProp.$$typeof === REACT_OPAQUE_ID_TYPE
) {
  // If we encounter useOpaqueReference's opaque object, this means we are hydrating.
  // In this case, call the opaque object's toString function which generates a new client
  // ID so client and server IDs match and throws to rerender.
  nextProp.toString();
}