Add rule prohibiting use of watch

[tatsuya-asami]

A new rule prohibiting the use of watch has been added.

Since there are cases where values are not updated when the React compiler and watch are used together, the use of watch is prohibited and useWatch should always be used.

https://github.com/react-hook-form/react-hook-form/issues/11910

[Grawl]

the same problem is with formState

[Grawl]

Not works for this code:

const form = useForm();
const { watch } = form;

This works:

    overrides: [
      {
        files: ['./src/**/*.tsx'],
        rules: {
          'no-restricted-properties': [
            'error',
            {
              property: 'watch',
              message: 'Not works with React Compiler. Use useFormWatch instead.',
            },
            {
              property: 'formState',
              message: 'Not works with React Compiler. Use useFormState instead.',
            },
          ],
        },
      },
    ],

I put it in tsx' overrides to apply only for components because I use Effector which also use watch method (also not recommended by Effector linter 😄 )

[tatsuya-asami]

@andykao1213 @Grawl Thank you for your review. I will review your comment and try to correct it!

[tatsuya-asami]

the same problem is with formState

Thank you for your comment. I will not change anything about formState in this pull request, as it would be better to create that rule separately!

[tatsuya-asami]

Check the object destruction of useForm return value @Grawl pointed out a good use case where the watch may be destructed later in another variable:

The code you suggested worked perfectly, so we adopted it as is. Thank you very much! I revised my typo as well!