function helloWorld() {
  useEffect(() => {
    // do something
  }, [props.value]);
  useEffect(() => {
    // do something
  }, [
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
  ]);
}

function helloWorldWithReact() {
  React.useEffect(() => {
    // do something
  }, [props.value]);
  React.useEffect(() => {
    // do something
  }, [
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
    props.value,
  ]);
}

function MyComponent(props) {
  useEffect(
    () => {
      console.log("some code", props.foo);
    },

    // We need to disable the eslint warning here,
    // because of some complicated reason.
    // eslint-disable line react-hooks/exhaustive-deps
    [],
  );

  return null;
}

function Comp1() {
  const { firstName, lastName } = useMemo(
    () => parseFullName(fullName),
    [fullName],
  );
}

function Comp2() {
  const { firstName, lastName } = useMemo(
    () => func(),
    [
      props.value,
      props.value,
      props.value,
      props.value,
      props.value,
      props.value,
      props.value,
      props.value,
      props.value,
      props.value,
      props.value,
    ],
  );
}

function Comp3() {
  const { firstName, lastName } = useMemo(
    (aaa, bbb, ccc, ddd, eee, fff, ggg, hhh, iii, jjj, kkk) =>
      func(aaa, bbb, ccc, ddd, eee, fff, ggg, hhh, iii, jjj, kkk),
    [foo, bar, baz],
  );
}

function Comp4() {
  const { firstName, lastName } = useMemo(
    () =>
      (foo && bar && baz) ||
      baz ||
      (foo && baz(foo) + bar(foo) + foo && bar && baz) ||
      baz ||
      (foo && baz(foo) + bar(foo)),
    [foo, bar, baz],
  );
}

function Comp5() {
  const { firstName, lastName } = useMemo(() => func(), [foo]);
}