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.

Changing size dynamically doesn't work in strict mode

See original GitHub issue

Describe the bug

Dynamically changing the size has no effect in React strict mode, either programatically or via devtools.

To Reproduce

Steps to reproduce the behavior:

Go to https://codesandbox.io/s/048norw86p
Open the preview window fullscreen
Open React devtools
Change the size prop to some other value
Notice nothing happens

Expected behavior

Changing the size prop should change the size of the fixed pane.

Additional context

As the getDerivedStateFromProps function is state dependent (it state based on the previous state), in React’s strict mode it gets tripped by this sort-of zany check:

https://github.com/facebook/react/blob/067cc24f55ef01a233be9e7564b337e35fed72ea/packages/react-reconciler/src/ReactFiberClassComponent.js#L139-L148

So when you change props, getDerivedStateFromProps gets called twice and the second time, this check returns false, so newState.paneXsize is not set:

https://github.com/tomkp/react-split-pane/blob/ec8d4ae90c9dc6d4eb1a941c2da59b80c22c65f6/src/SplitPane.js#L235-L238

I could have this explanation wrong, I’ll admit it’s pretty confusing.

Issue Analytics

State:
Created 5 years ago
Comments:8 (3 by maintainers)

Top GitHub Comments

1reaction

tmeasdaycommented, Sep 8, 2018

OK, my PR now works: https://github.com/tomkp/react-split-pane/pull/315 cc @wuweiweiwu

0reactions

wuweiweiwucommented, Sep 8, 2018

Released in 0.1.83!!

Top Results From Across the Web

Setting css properties with javascript not working on strict mode?

(I'm betting that jQuery could handle this just fine, but I'm trying to keep page size at an absolute minimum in this particular...

Dynamic imports in StrictMode · Issue #6957 · vercel/next.js

Bug report Using the React.StrictMode wrapper, and inside this wrapper using some dynamic import. Is throwing this warning: Is not a "Bug", ...

InnoDB Strict Mode - MariaDB Knowledge Base

InnoD strict mode makes InnoDB more reliable. ... Its global value can be changed dynamically with SET GLOBAL. For example: SET GLOBAL innodb_strict_mode=ON ......

Handling common JavaScript problems - MDN Web Docs

Declaring strict mode at the top of your JavaScript code causes it to be parsed with a stricter set of rules, meaning that...

Angular CLI Strict Mode

To opt into the strict mode, you need to create a new Angular CLI app, specifying the --strict flag: The command above will...