question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Constructor onChange breaks container components that sync state with onChange

See original GitHub issue

Prerequisites

Description

https://github.com/mozilla-services/react-jsonschema-form/pull/1034 introduced a breaking change for a case of mine that involves an external container/wrapper component that has state including formData synchronized via the onChange handler. I haven’t updated my fork in awhile but in doing so I encountered this error across many instances of this container:

Warning: setState(…): Cannot update during an existing state transition (such as within render or another component’s constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount

Example: https://codepen.io/pushred/pen/pYgJbq?editors=0011#0

Steps to Reproduce

  1. Mount container component with onChange wired to setState
  2. Observe console error

Expected behavior

I’m expecting onChange to be called only on changes, not on mount. I understand that this call is conditioned on a change between the initial react-jsonschema-form state and what’s passed as a prop. But for that to apply seems to require providing an initial data object that matches the schema / react-jsonschema initial state. An empty or undefined object doesn’t work.

I think this conflicts with some examples out there and definitely with my real world usage in creating new records or dealing with resources that provide incomplete data.

I will workaround this in my fork by simply removing the feature but wanted to document what I ran into. I think the root decision was incorrect as an external setState is a reasonable side effect of an event handler, especially onChange. I think componentDidMount should be reconsidered as the appropriate lifecycle method.

Actual behavior

💥

Version

1.2.1

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:12
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
epicfaacecommented, Mar 10, 2019

That makes sense @pushred , thanks for the report. Is there a way to make onChange called only on changes, not on mount, but still provide a satisfactory solution for #1033?

0reactions
stale[bot]commented, Apr 15, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

onChange event for React child component to update state
The onChange handler for the DatePicker is not called with a standard browser change event, but with value and formattedValue as arguments.
Read more >
How to Test React Components: the Complete Guide
Note: The state is changed, initialized and contained in our App.js component. We have simply passed down the state value and setState function ......
Read more >
How to Build a To-Do List with React | Inventive Blog
Learn how to make a simple to-do list using React in this quick and easy tutorial guide. Create your to-do list now!
Read more >
Simplified Angular Change Detection | by Pankaj Parkar | ngconf
This process of syncing HTML with the state can be termed as “Change detection”, each framework has its own way of doing it....
Read more >
Using ReactJS, ES6 & JSX to Build a UI (the rise of MERN ...
Like Angular, React breaks the front-end application down into components. Each component can hold its own state, and a parent can pass its ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found