Why can't I get Typescript yield to work with custom hooks?

Question

So I have this function where "useCustom" is my custom Hook on Typescript which basically replaces a string using a json file.

import { Stringable } from './types';
export declare const useCustom: () => (key: string, replace?: Stringable[] | undefined) => string;

export function* calling(action: any) {
  const custom = useCustom();
  try {
    yield call(status, custom('Template applied.'), StatusType.success);
  } catch (e) {
    yield put(getFail(e));
  }
}

The problem is I get this compile error:

React Hook "useCustom" is called in function "calling" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks.

Using functional programming compiles successfully but it doesn't work (the string never changes):

function Custom(label: string) {
  const custom = useCustom();
    let customized = custom(label);
    return customized !== '' ? customized : label;
} 

export function* calling(action: any) {
      try {
        yield call(status, Custom('Template applied.'), StatusType.success);
      } catch (e) {
        yield put(getFail(e));
      }
    }

I'm not familiar with this kind of functions: "function*" neither with yield. I've tried many different things and got totally lost on the process to make my custom hook to work.

Any ideas?

Thanks

Answer 1

Your component name should start with capital letter.