Learn React Hooks

Hook factories

Alternatively, we could also create a Hook factory function, which uses Symbol internally, in order to give each Hook a unique key name:

function createUseState () {    const keyName = Symbol()    return function useState () {        // ... use unique key name to handle hook state ...    }}

Then, we could use the factory function as follows:

// NOTE: Not the actual React Hook APIconst useNameState = createUseState()function MyName () {    const [ name, setName ] = useNameState('')    // ...}

However, this means that we will need to instantiate each Hook twice: once outside of our component and once inside the function component. This creates more room for errors. For example, if we create two Hooks and copy and paste the boilerplate code, then we ...