DEV Community

Discussion on: React with Typescript

lukeshiru profile image

That is just the type that's used by the event handlers, and that particularly doesn't have much to do with one way data flow. You can confirm this, just hover the onChange property in one of the inputs and then do cmd+click in mac or ctrl+click in Linux or Windows, that will take you to the type definition and you'll see that the type is not (event: ChangeEvent<T>) => void, but actually ChangeEventHandler<T> | undefined. The T there is a generic for all the elements that have the onChange property, but you can read it as ChangeEventHandler<HTMLInputElement>, and the | undefined is because all properties of native elements are optional (that's why I suggest you do the same with your properties so they provide a better DX).

The issue with one-way data flow is obvious when you have a property with the type Dispatch<SetStateAction<...>> because you basically receiving a state setter from the parent and updating it from the child, which is basically going against the correct flow which is from parent to child.

In an scenario in which you have a child with data that's needed from the parent, you should just use events, adding something custom like onAdd and letting the parent decide what to do with that.

Hope that explains it better :)

Thread Thread
alim1496 profile image
Mohammad Abdul Alim Author

nicely explained
thanks a lot