jaredpalmer/formik

Use React.forwardRef in <Formik>

Open

#2208 opened on Jan 14, 2020

View on GitHub
 (14 comments) (4 reactions) (0 assignees)TypeScript (34,255 stars) (2,801 forks)batch import
Component: FormikFocus: TypeScripthelp wanted

Description

As of 2.1.2, <Formik> now allows for an innerRef prop. However, we should instead use React.forwardRef + React.useImperativeHandle. This is more intuitive and closer to best practices. The problem though, is that <Formik> takes TypeScript generics for Values and I'm not sure how to express this in with forwardRef. AFAICT, you can't because forwardRef returns a constant and constants can't have generics.

Help?!?!

Contributor guide

Tech stack
reacttypescript
Domain
frontend
Issue type
refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
needs maintainer response
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
ReactTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
This issue requests converting the <Formik> component to use React.forwardRef. The main challenge is handling TypeScript generics for the Values type parameter. The relevant file is likely src/Formik.tsx. The maintainer should clarify how to type forwardRef with generic props, possibly using React.ForwardRefRenderFunction<HTMLDivElement, FormikProps<Values>>.