Provide React Hooks

[vincentjames501]

Has there been any thoughts on React Hooks adoption vs using a HOC? I know things are early and even Redux is still working to get a full grasp on how to do things in the React Hooks world (here, and here), but just thought I'd throw this out there for discussion and thoughts of what it might look like once Redux gets proper hook support.

function MyForm() {
  const { handleSubmit, context, ...otherProps } = useReduxForm({form: 'myForm', ...otherConfigProps});
  return (
    <Form context={context} onSubmit={() => console.log('submitted!')} >
      <Field name="myInput" component="input" type="text" />
    </Form>
  );
}

[gabrielbs]

Has this been answered somewhere?

[aislanmaia]

This doesn't seems getting any attention at all in this library. But Hooks could be the dream for this because it will remove all the boilerplate and complexity regarding setup the form just to work.

[fzaninotto]

React-Redux v7.1 (currently in alpha) offers hook alternatives to connect (namely useDispatch and useSelector). Everything is ready to support hooks in redux-form.

Is there any interest for this feature in the core team?

[jerrygreen]

I think there's no reason to use redux-form since this:

README#️attention

And this:

https://github.com/final-form/react-final-form
https://github.com/final-form/react-final-form-hooks

And redux, too. Use useContext instead (with other hooks like useReducer)

[fzaninotto]

(redacted, I thought I was commenting on another repo)

[jedwards1211]

You can hack it in yourself at least:

/**
 * @flow
 */
import { useContext } from 'react'
import { ReduxFormContext } from 'redux-form/es/ReduxFormContext'
import { type Context } from 'redux-form/es/types'

export default function useReduxForm(): Context {
  return useContext(ReduxFormContext)
}

/**
 * @flow
 */

import useReduxForm from './useReduxForm'
import { useSelector } from 'react-redux'
import getFormValues from 'redux-form/es/getFormValues'

export default function useFormValue(name: string): any {
  const { form } = useReduxForm()
  return useSelector(state => getFormValues(form)(state)?.[name])
}

[iamandrewluca]

Providing react hooks, we will need to bump react version to 16.8 (even better 16.9), and this is a breaking change from the library point of view. But as we know react is back compatible and users of redux-form can just upgrade to 16.8 without problems.
@erikras @renatoagds

[pokonski]

@jerrygreen sure, let me rewrite a hundred forms to another library just to have a hook ;)

[iamandrewluca]

@pokonski adding hooks should not affect curent components behaviour.
We can just create the hooks, and leave the components as is.
Or we can create hooks remove duplicate logic, and components will use hooks under the hood.
From user perspective, nothing will be changed, just will have one more way to use form.

[jedwards1211]

@iamandrewluca you could avoid the breaking change in required React version if existing components don't use hooks under the hood and users have to import the hooks directly from a specific submodule/subfolder like import {useFormValue} from 'redux-form/hooks'. That module could throw an error when first loaded if the version of React doesn't support hooks.

[iamandrewluca]

@jedwards1211 yes this is possible, but then we will have to maintain 2 codebases, one with hooks, and one without.
Today had a talk with repo members

So we can increase react minor version, and release redux-form using minor version.
If user is accepting new minor versions automatically. both libraries should update.
If is not accepting automatic minor version, then both libraries should not update
There is only the case when user has react installed as a fixed version

So I think we can increase React minor version with ease because of semver.

[jedwards1211]

I think the people who came up with semver would be very angry about that idea. Responsibly maintained packages always use a new major version to drop support for old versions of dependencies or node. If you publish a minor update any developers who happen to have something like

"react": "16.7.0",
"redux-form": "^8.0.0",

will get a nasty unexpected surprise. Please don't contribute to developer suffering. Just do the right thing and release it as a major version bump.

[jedwards1211]

Example of responsible semver usage:
https://github.com/mui-org/material-ui/blob/master/CHANGELOG.md#material-uicorev400-alpha0

@material-ui/core@v4.0.0-alpha.0

Breaking changes

• [core] Increase React peer dependency to v16.8.0 (#14432) @oliviertassinari

[iamandrewluca]

@jedwards1211 I mentioned this case, and in this case I think that usign "react": "16.7.0", is not responsible from developer side.

If he respects semver, it should be for most of libraries he is using, otherwise, all libraries should stay on hold, and bumping major version for every minor dependency upgrade.

There is only the case when user has react installed as a fixed version

ps: https://semver.org/#what-should-i-do-if-i-update-my-own-dependencies-without-changing-the-public-api

[jedwards1211]

@iamandrewluca that section addresses dependencies used internally, not peer dependencies. The bottom line of semver is, if any project would break if the new release is dropped in, it should be released as a new major version.

[jedwards1211]

react-apollo v3.0.0 release from the changelog https://github.com/apollographql/react-apollo/blob/master/Changelog.md#breaking-changes

Breaking changes

• The minimum supported React version is now 16.8.

[jedwards1211]

react-jss v10.0.0-alpha.1 https://github.com/cssinjs/jss/blob/master/changelog.md#breaking-changes-3

Breaking changes

• [react-jss] Drop support for older React versions, require v16.3 or higher

[jedwards1211]

react-redux 7.0.0-beta.0 https://github.com/reduxjs/react-redux/releases/tag/v7.0.0-beta.0

"The major change for this release is that connect is now implemented using Hooks internally. Because of this, we now require a minimum React version of 16.8.4 or higher."

[iamandrewluca]

@jedwards1211 ok, I got it 🙂

[pokonski]

@iamandrewluca I meant in my reply that his advice to rewrite to a completely different form library is a reckless suggestion. That would be weeks of work for a small convience.

[iamandrewluca]

At this moment I think no one is interested in allocating time for redux-form maintance, and feature implementations.
We have a v9 roadmap, but for now is on hold, because we don't have enough resources.

#4467

[shorif2000]

You can hack it in yourself at least:

/**
 * @flow
 */
import { useContext } from 'react'
import { ReduxFormContext } from 'redux-form/es/ReduxFormContext'
import { type Context } from 'redux-form/es/types'

export default function useReduxForm(): Context {
  return useContext(ReduxFormContext)
}

/**
 * @flow
 */

import useReduxForm from './useReduxForm'
import { useSelector } from 'react-redux'
import getFormValues from 'redux-form/es/getFormValues'

export default function useFormValue(name: string): any {
  const { form } = useReduxForm()
  return useSelector(state => getFormValues(form)(state)?.[name])
}

Can you provide full page example with a form?