Repository: facebook/react
File: packages/react-server/src/ReactFizzHooks.js (JavaScript)

Code before:

function useFormState<S, P>(
  action: (S, P) => Promise<S>,
  initialState: S,
  permalink?: string,
): [S, (P) => void] {
  resolveCurrentlyRenderingComponent();

  // Bind the initial state to the first argument of the action.
  // TODO: Use the keypath (or permalink) to check if there's matching state
  // from the previous page.
  const boundAction = action.bind(null, initialState);

  // Wrap the action so the return value is void.
  const dispatch = (payload: P): void => {
    boundAction(payload);
  };

  // $FlowIgnore[prop-missing]
  if (typeof boundAction.$$FORM_ACTION === 'function') {
    // $FlowIgnore[prop-missing]
    dispatch.$$FORM_ACTION = (prefix: string) => {
      // $FlowIgnore[prop-missing]
      const metadata: ReactCustomFormAction = boundAction.$$FORM_ACTION(prefix);
      // Override the target URL
      if (typeof permalink === 'string') {
        metadata.target = permalink;
      }
      return metadata;
    };
  } else {
    // This is not a server action, so the permalink argument has
    // no effect. The form will have to be hydrated before it's submitted.
  }

  return [initialState, dispatch];
}

function useId(): string {
  const task: Task = (currentlyRenderingTask: any);
  const treeId = getTreeId(task.treeContext);

  const resumableState = currentResumableState;
  if (resumableState === null) {
    throw new Error(
      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
    );
  }

  const localId = localIdCounter++;
  return makeId(resumableState, treeId, localId);

Review comment (suggestion):
Should this be `!== undefined` and coerced? Because generally we allow toString/valueOf.

Code after:
}

function useFormState<S, P>(
  action: (S, P) => Promise<S>,
  initialState: S,
  permalink?: string,
): [S, (P) => void] {
  resolveCurrentlyRenderingComponent();

  // Bind the initial state to the first argument of the action.
  // TODO: Use the keypath (or permalink) to check if there's matching state
  // from the previous page.
  const boundAction = action.bind(null, initialState);

  // Wrap the action so the return value is void.
  const dispatch = (payload: P): void => {
    boundAction(payload);
  };

  // $FlowIgnore[prop-missing]
  if (typeof boundAction.$$FORM_ACTION === 'function') {
    // $FlowIgnore[prop-missing]
    dispatch.$$FORM_ACTION = (prefix: string) => {
      // $FlowIgnore[prop-missing]
      const metadata: ReactCustomFormAction = boundAction.$$FORM_ACTION(prefix);
      // Override the target URL
      if (permalink !== undefined) {
        if (__DEV__) {
          checkAttributeStringCoercion(permalink, 'target');
        }
        metadata.target = permalink + '';
      }
      return metadata;
    };
  } else {
    // This is not a server action, so the permalink argument has
    // no effect. The form will have to be hydrated before it's submitted.
  }

  return [initialState, dispatch];
}

function useId(): string {
  const task: Task = (currentlyRenderingTask: any);
  const treeId = getTreeId(task.treeContext);

  const resumableState = currentResumableState;
  if (resumableState === null) {
    throw new Error(
      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
    );