React useContext报错重启后消失，修改代码复现问题求助

这个报错的核心是违反了React组件的命名规范：

• React要求函数组件的名称必须以大写字母开头，小写开头的函数会被视为普通JS函数，而非React组件。
• Hook（比如useContext）只能在React函数组件或自定义Hook（名称以use开头）中调用，ESLint的react-hooks/rules-of-hooks规则会严格校验这一点。
• 重启后错误消失是因为开发环境缓存了编译结果，未触发ESLint的实时检查；修改文件后热重载触发校验，命名问题被重新识别，所以错误重现。

另外代码里还存在变量名冲突：组件内部const {contacts} = contactContext;的contacts和原组件名（小写contacts）重名，虽不是报错直接原因，但会增加代码混淆风险。

1. 修正组件命名：将Contact.js中的组件名改为大写开头的Contacts，同步修改导出语句：

import React, { Fragment, useContext } from 'react';
import ContactContext from '../../context/contact/contactContext';
import { ContactItems } from './ContactItems';

// 组件名改为大写开头
const Contacts = () => {
    const contactContext = useContext(ContactContext);

    // 可重命名变量避免冲突，也可保留（组件名已大写则无混淆）
    const { contacts } = contactContext;

    return(
        <Fragment>
            {contacts.map(contact =>(
                <ContactItems key={contact.id} contact={contact}/>
            ))}
        </Fragment>
    )
}

export default Contacts

2. 保持使用一致性：在其他引入该组件的文件中，使用大写的Contacts来引入和渲染：

import Contacts from './path/to/Contact';

// 渲染组件
<Contacts />

修改完成后，ESLint会正确识别这是一个React函数组件，useContext的调用符合Hook规则，报错会永久消失。

内容的提问来源于stack exchange，提问作者Alex Antoine