Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable hooks! #14679

Merged
merged 3 commits into from
Jan 23, 2019
Merged

Enable hooks! #14679

merged 3 commits into from
Jan 23, 2019

Conversation

bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Jan 23, 2019

Turn hooks on everywhere in preparation for the upcoming release.

Commits are atomic to simplify the review:

  • 7c54bff: Turn hooks on everywhere
  • 021844a: Remove test overrides (and promote internal tests that only override the hooks flag)
  • d1ffc25: Remove hooks flag entirely

@sizebot
Copy link

sizebot commented Jan 23, 2019

React: size: 🔺+5.0%, gzip: 🔺+2.9%

ReactDOM: size: 🔺+5.0%, gzip: 🔺+5.3%

Details of bundled changes.

Comparing: 73962c3...d1ffc25

react

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react.development.js -0.1% -0.3% 98.38 KB 98.26 KB 25.68 KB 25.6 KB UMD_DEV
react.production.min.js 🔺+5.0% 🔺+2.9% 11.56 KB 12.14 KB 4.58 KB 4.71 KB UMD_PROD
react.profiling.min.js +4.2% +2.5% 13.72 KB 14.3 KB 5.11 KB 5.24 KB UMD_PROFILING
react.development.js -0.2% -0.2% 61.7 KB 61.59 KB 16.6 KB 16.56 KB NODE_DEV
react.production.min.js 🔺+9.3% 🔺+5.7% 6.12 KB 6.7 KB 2.62 KB 2.77 KB NODE_PROD
React-dev.js -0.8% -1.2% 59.22 KB 58.75 KB 15.83 KB 15.64 KB FB_WWW_DEV
React-prod.js 🔺+0.2% 🔺+0.1% 15.38 KB 15.42 KB 4.11 KB 4.11 KB FB_WWW_PROD
React-profiling.js +0.2% +0.1% 15.38 KB 15.42 KB 4.11 KB 4.11 KB FB_WWW_PROFILING

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js -0.0% -0.0% 740.08 KB 739.73 KB 170.61 KB 170.53 KB UMD_DEV
react-dom.production.min.js 🔺+5.0% 🔺+5.3% 98.88 KB 103.78 KB 32.18 KB 33.87 KB UMD_PROD
react-dom.profiling.min.js +4.8% +5.1% 101.86 KB 106.78 KB 32.83 KB 34.5 KB UMD_PROFILING
react-dom.development.js -0.0% -0.0% 735.14 KB 734.79 KB 169.18 KB 169.11 KB NODE_DEV
react-dom.production.min.js 🔺+5.0% 🔺+5.5% 98.88 KB 103.84 KB 31.67 KB 33.41 KB NODE_PROD
react-dom.profiling.min.js +4.9% +5.3% 101.98 KB 106.95 KB 32.29 KB 33.98 KB NODE_PROFILING
ReactDOM-dev.js -0.1% -0.1% 758.01 KB 757.29 KB 170.53 KB 170.34 KB FB_WWW_DEV
ReactDOM-prod.js 0.0% -0.0% 312.5 KB 312.5 KB 57.56 KB 57.56 KB FB_WWW_PROD
ReactDOM-profiling.js 0.0% -0.0% 319.66 KB 319.66 KB 58.88 KB 58.88 KB FB_WWW_PROFILING
react-dom-unstable-fire.development.js -0.0% -0.0% 740.42 KB 740.07 KB 170.75 KB 170.67 KB UMD_DEV
react-dom-unstable-fire.production.min.js 🔺+5.0% 🔺+5.3% 98.89 KB 103.79 KB 32.18 KB 33.88 KB UMD_PROD
react-dom-unstable-fire.profiling.min.js +4.8% +5.1% 101.88 KB 106.8 KB 32.83 KB 34.5 KB UMD_PROFILING
react-dom-unstable-fire.development.js -0.0% -0.0% 735.48 KB 735.13 KB 169.33 KB 169.25 KB NODE_DEV
react-dom-unstable-fire.production.min.js 🔺+5.0% 🔺+5.5% 98.9 KB 103.85 KB 31.68 KB 33.42 KB NODE_PROD
react-dom-unstable-fire.profiling.min.js +4.9% +5.2% 102 KB 106.97 KB 32.3 KB 33.99 KB NODE_PROFILING
ReactFire-dev.js -0.1% -0.1% 757.22 KB 756.5 KB 170.48 KB 170.26 KB FB_WWW_DEV
ReactFire-prod.js 0.0% -0.0% 301.09 KB 301.09 KB 55.26 KB 55.26 KB FB_WWW_PROD
ReactFire-profiling.js 0.0% -0.0% 308.18 KB 308.18 KB 56.55 KB 56.55 KB FB_WWW_PROFILING
react-dom-test-utils.development.js 0.0% -0.0% 44.87 KB 44.87 KB 12.3 KB 12.3 KB UMD_DEV
react-dom-test-utils.production.min.js 0.0% -0.1% 9.97 KB 9.97 KB 3.71 KB 3.71 KB UMD_PROD
react-dom-test-utils.development.js 0.0% -0.0% 44.59 KB 44.59 KB 12.24 KB 12.24 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% -0.1% 9.74 KB 9.74 KB 3.65 KB 3.65 KB NODE_PROD
react-dom-unstable-native-dependencies.development.js 0.0% -0.0% 60.61 KB 60.61 KB 15.92 KB 15.92 KB UMD_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% -0.1% 11.01 KB 11.01 KB 3.81 KB 3.81 KB UMD_PROD
react-dom-unstable-native-dependencies.development.js 0.0% -0.0% 60.29 KB 60.29 KB 15.79 KB 15.79 KB NODE_DEV
react-dom-unstable-native-dependencies.production.min.js 0.0% -0.1% 10.75 KB 10.75 KB 3.71 KB 3.71 KB NODE_PROD
react-dom-server.browser.development.js -0.2% -0.1% 125.09 KB 124.9 KB 33.35 KB 33.32 KB UMD_DEV
react-dom-server.browser.production.min.js 🔺+9.8% 🔺+10.1% 16.96 KB 18.63 KB 6.53 KB 7.19 KB UMD_PROD
react-dom-server.browser.development.js -0.2% -0.1% 121.22 KB 121.03 KB 32.43 KB 32.39 KB NODE_DEV
react-dom-server.browser.production.min.js 🔺+9.9% 🔺+10.2% 16.87 KB 18.54 KB 6.51 KB 7.17 KB NODE_PROD
ReactDOMServer-dev.js -0.4% -0.6% 122.4 KB 121.85 KB 32.07 KB 31.87 KB FB_WWW_DEV
react-dom-server.node.development.js -0.2% -0.1% 123.28 KB 123.09 KB 32.97 KB 32.94 KB NODE_DEV
react-dom-server.node.production.min.js 🔺+9.4% 🔺+9.5% 17.74 KB 19.42 KB 6.83 KB 7.48 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% -0.1% 3.63 KB 3.63 KB 1.44 KB 1.44 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% -0.1% 1.21 KB 1.21 KB 707 B 706 B UMD_PROD
react-dom-unstable-fizz.browser.development.js 0.0% -0.1% 3.45 KB 3.45 KB 1.39 KB 1.39 KB NODE_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% -0.2% 1.05 KB 1.05 KB 638 B 637 B NODE_PROD
react-dom-unstable-fizz.node.development.js 0.0% -0.1% 3.7 KB 3.7 KB 1.42 KB 1.42 KB NODE_DEV
react-dom-unstable-fizz.node.production.min.js 0.0% -0.1% 1.1 KB 1.1 KB 668 B 667 B NODE_PROD

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.development.js -0.1% -0.1% 518.92 KB 518.57 KB 114.46 KB 114.38 KB UMD_DEV
react-art.production.min.js 🔺+5.4% 🔺+6.3% 90.93 KB 95.84 KB 27.97 KB 29.73 KB UMD_PROD
react-art.development.js -0.1% -0.1% 450.45 KB 450.09 KB 97.34 KB 97.27 KB NODE_DEV
react-art.production.min.js 🔺+8.9% 🔺+9.7% 55.91 KB 60.86 KB 17.22 KB 18.89 KB NODE_PROD
ReactART-dev.js -0.2% -0.2% 459.73 KB 459.01 KB 96.59 KB 96.4 KB FB_WWW_DEV
ReactART-prod.js 0.0% -0.0% 188.4 KB 188.4 KB 32.23 KB 32.23 KB FB_WWW_PROD

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-dev.js -0.1% -0.1% 584.23 KB 583.86 KB 127.08 KB 127.02 KB RN_FB_DEV
ReactNativeRenderer-prod.js 0.0% -0.0% 244.14 KB 244.14 KB 42.9 KB 42.9 KB RN_FB_PROD
ReactNativeRenderer-profiling.js 0.0% -0.0% 250.29 KB 250.29 KB 44.23 KB 44.23 KB RN_FB_PROFILING
ReactNativeRenderer-dev.js -0.1% -0.1% 584.14 KB 583.78 KB 127.04 KB 126.98 KB RN_OSS_DEV
ReactNativeRenderer-prod.js 🔺+7.5% 🔺+8.5% 227.18 KB 244.16 KB 39.53 KB 42.9 KB RN_OSS_PROD
ReactNativeRenderer-profiling.js +7.3% +8.1% 233.19 KB 250.31 KB 40.91 KB 44.23 KB RN_OSS_PROFILING
ReactFabric-dev.js -0.1% -0.1% 575.08 KB 574.72 KB 124.81 KB 124.75 KB RN_FB_DEV
ReactFabric-prod.js 0.0% -0.0% 237.34 KB 237.34 KB 41.45 KB 41.45 KB RN_FB_PROD
ReactFabric-profiling.js 0.0% -0.0% 242.64 KB 242.64 KB 42.77 KB 42.76 KB RN_FB_PROFILING
ReactFabric-dev.js -0.1% -0.1% 574.99 KB 574.62 KB 124.77 KB 124.71 KB RN_OSS_DEV
ReactFabric-prod.js 🔺+7.7% 🔺+8.9% 220.41 KB 237.35 KB 38.07 KB 41.44 KB RN_OSS_PROD
ReactFabric-profiling.js +7.6% +8.4% 225.5 KB 242.65 KB 39.45 KB 42.76 KB RN_OSS_PROFILING

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-test-renderer.development.js -0.1% -0.1% 463.66 KB 463.31 KB 100.1 KB 100.02 KB UMD_DEV
react-test-renderer.production.min.js 🔺+8.6% 🔺+9.9% 57.31 KB 62.25 KB 17.61 KB 19.35 KB UMD_PROD
react-test-renderer.development.js -0.1% -0.1% 458.62 KB 458.27 KB 98.86 KB 98.79 KB NODE_DEV
react-test-renderer.production.min.js 🔺+8.7% 🔺+9.7% 56.98 KB 61.93 KB 17.45 KB 19.14 KB NODE_PROD
ReactTestRenderer-dev.js -0.1% -0.1% 468.12 KB 467.76 KB 98.46 KB 98.39 KB FB_WWW_DEV
react-test-renderer-shallow.development.js -3.3% -4.9% 38.09 KB 36.84 KB 9.83 KB 9.35 KB UMD_DEV
react-test-renderer-shallow.production.min.js 🔺+4.7% 🔺+2.6% 10.56 KB 11.05 KB 3.25 KB 3.33 KB UMD_PROD
react-test-renderer-shallow.development.js -3.9% -5.8% 32.39 KB 31.14 KB 8.46 KB 7.98 KB NODE_DEV
react-test-renderer-shallow.production.min.js 🔺+4.4% 🔺+4.2% 11.2 KB 11.69 KB 3.49 KB 3.64 KB NODE_PROD
ReactShallowRenderer-dev.js -4.3% -5.2% 30.85 KB 29.54 KB 7.81 KB 7.41 KB FB_WWW_DEV

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler.development.js -0.1% -0.1% 448.28 KB 447.92 KB 95.84 KB 95.77 KB NODE_DEV
react-reconciler.production.min.js 🔺+8.7% 🔺+9.8% 57.07 KB 62.04 KB 17.07 KB 18.74 KB NODE_PROD
react-reconciler-persistent.development.js -0.1% -0.1% 446.65 KB 446.3 KB 95.19 KB 95.12 KB NODE_DEV
react-reconciler-persistent.production.min.js 🔺+8.7% 🔺+9.8% 57.08 KB 62.05 KB 17.07 KB 18.75 KB NODE_PROD
react-reconciler-reflection.development.js 0.0% -0.0% 15.4 KB 15.4 KB 4.84 KB 4.83 KB NODE_DEV
react-reconciler-reflection.production.min.js 0.0% -0.1% 2.56 KB 2.56 KB 1.13 KB 1.13 KB NODE_PROD

scheduler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
scheduler.development.js 0.0% -0.0% 22.42 KB 22.42 KB 5.95 KB 5.94 KB NODE_DEV
scheduler.production.min.js 0.0% -0.2% 4.73 KB 4.73 KB 1.83 KB 1.82 KB NODE_PROD
scheduler-tracing.production.min.js 0.0% -0.5% 728 B 728 B 387 B 385 B NODE_PROD
scheduler-tracing.profiling.min.js 0.0% -0.1% 3.26 KB 3.26 KB 1001 B 1000 B NODE_PROFILING
SchedulerTracing-dev.js -3.4% -7.6% 10.31 KB 9.96 KB 2.26 KB 2.09 KB FB_WWW_DEV

Generated by 🚫 dangerJS

@bvaughn bvaughn merged commit 6cb2677 into facebook:master Jan 23, 2019
@bvaughn bvaughn deleted the enable-hooks-flag branch January 23, 2019 21:28
@thepureinx000
Copy link

💪💪💪

@zanedb
Copy link

zanedb commented Jan 23, 2019

YESSSSS I’M SO EXCITED

@Daniel15
Copy link
Member

HOOK ALL THE THINGS

@coderitual
Copy link

That's great news even though everyone is using them on production for several months 😄

@int64ago
Copy link

Wow! I'm ready for it!

@audiolion
Copy link

What caused the bundle size to go up?

@bvaughn
Copy link
Contributor Author

bvaughn commented Jan 24, 2019

What caused the bundle size to go up?

Hooks is a new set of APIs that were not included in (stable) builds before.

@zaguiini
Copy link

zaguiini commented Jan 24, 2019

Nice! When is it going to be released?

@ngtan
Copy link

ngtan commented Jan 24, 2019

I can't wait to bring it into my next release officially.

@Daniel15
Copy link
Member

When is it going to be released?

Looks like @gaearon dropped a hint on Twitter recently:

@Jemair
Copy link

Jemair commented Jan 24, 2019

Is there anything different from the beta version?

@nanyang24
Copy link

nanyang24 commented Jan 24, 2019

I'm so excited!
Can't wait to use Hooks in the production environment.

So, Hooks will be coming with the React 16.8 ??

@zaguiini
Copy link

zaguiini commented Jan 24, 2019

Also, what about React Native? When will it be ready as a stable solution?

@aaronschubert0
Copy link

@zaguiini React Native usually syncs React every two weeks (on master), so I'd say once that's done and then wait for the next monthly RC

@PaquitoSoft
Copy link

Hi there,

Fantastic news!

Are hooks supported in server side rendering?

Thanks

@gaearon
Copy link
Collaborator

gaearon commented Jan 24, 2019

@PaquitoSoft Yes, since the first alpha.

@KBPsystem777
Copy link

Lets Hook the Future!

@chaiyilin
Copy link

wondering what is the rhythm to update the react version in CRA?

@gaearon
Copy link
Collaborator

gaearon commented Jan 25, 2019

You can always update React version independent of CRA in your project.

@sakalx
Copy link

sakalx commented Jan 26, 2019

What is better from performance side
useMemo or useState

in case when need to do something only when props change
for example:

function child({isValid}) {
  useMemo(() => {
    // do something
  }, [isValid]);
}

or

function child({isValid}) {
  const [currStat, setStat] = useState(null);

  if (currStat !== isValid) {
    setStat(isValid);
    // do something
  }
}

@Daniel15
Copy link
Member

@sakalx You're probably better off asking questions somewhere people are more likely to see it 😃 See https://reactjs.org/community/support.html for some suggestions on where to get support.

Reactiflux is pretty good if you want somewhere to chat to other people that use React: https://www.reactiflux.com/

@bvaughn
Copy link
Contributor Author

bvaughn commented Jan 26, 2019

What is better from performance side useMemo or useState
in case when need to do something only when props change for example:

These two hooks are pretty different. You could use the state hook in the way you mention above, but it's not what it's meant for.

As for which would perform better– in the above example, your call to setStat would cause another render (with the updated state value) which useMemo would avoid.

@gaearon
Copy link
Collaborator

gaearon commented Jan 26, 2019

@sakalx Never put side effects into useMemo. That's not what it's for.

@gaearon
Copy link
Collaborator

gaearon commented Jan 26, 2019

From docs:

Remember that the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.

https://reactjs.org/docs/hooks-reference.html#usememo

@bvaughn
Copy link
Contributor Author

bvaughn commented Jan 26, 2019

Never put side effects into useMemo.

I didn't read the original message as a side effect, rather– an expensive computation required in order to render

@coderitual
Copy link

I have a stupid question. Can a function passed to useEffect be an async (eg to handle fetch with await)?

Async function inplicitly returns a promise and useMemo expects returned value to be a cleanup function which may be confusing.

@zaguiini
Copy link

zaguiini commented Jan 26, 2019

@coderitual no, because the return statement (a function or nothing) in an effect actually behaves something like componentWillUnmount - the cleanup part - and it’s synchronous, so you have to put an IIFE to work with async await inside an effect.

@coderitual
Copy link

coderitual commented Jan 26, 2019

Yhm, I see. Thanks @zaguiini
There is always an option to create custom useAsyncEffect to handle this. It's a bit sad though that a cleanup function has won with a common usage of effect. I could imagine it has something to do with suspense and resource concept so I am ok with that :)

@gaearon
Copy link
Collaborator

gaearon commented Jan 26, 2019

@coderitual

If you try to do useEffect(async () => {}) you'll see a warning message that tells you exactly how to solve your problem. In general, my recommendation would be to try things and see what happens. :-)

screen shot 2019-01-26 at 9 03 05 pm

That said async chains in effects is usually a bad idea because props might change in the middle. So you need to be careful about handling race condition at every entry point.

Indeed Suspense will be a different solution that would make most data fetching in effects unnecessary.

@coderitual
Copy link

@gaearon

Oh, that's cool message. I realised something more important.

That said async chains in effects is usually a bad idea because props might change in the middle. So you need to be careful about handling race condition at every entry point.

Didn't think about this but it's actually a really valid point. It looks like using many useEffects hooks "connected" by the state/prop variables is a way to go.

Gracias :)

@zaguiini
Copy link

zaguiini commented Jan 29, 2019

@coderitual,

Just complementing @gaearon answer about promises: you most will most likely need an abort controller to prevent messing with state, lifecycle or something. Let me explain that with code:

function fetchUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: 'Luis Felipe Zaguini',
      })
    }, 3000)
  })
}

function GreetUser({ id }) {
  const [user, setUser] = React.useState(undefined)

  React.useEffect(() => {
    const controller = new window.AbortController()

    fetchUser(id)
      .then((user) => {
        if(!controller.signal.aborted) {
          setUser(user)
        }
      })
      .catch(console.error)
    
    return () => {
      controller.abort()
    }
  }, [id])

  return (
    <div>
      {user ? `Hello, ${user.name}!` : 'Loading...'}
    </div>
  )
}

I think it's pretty clear what I'm trying to show. When the promise resolves, it will try to set the state. The promise will resolve even if the component is unmounted or the id changed.

See? With that, in the clean up function, we can "abort" that promise, avoiding the unmounted component state update warning. I don't think that's possible using async/await, not in that way, at least...

@coderitual
Copy link

@zaguiini Hm, I am not sure if this is a good place for such discussion. Your example though doesn't use AbortController correctly. You are not aborting promise but just checking if the signal was raised after your promise resolved. The same behaviour you can achieve with async/await. The way Abort Controller should be used:

const controller = new AbortController();
const signal = controller.signal;
fetch(url, {signal}).then...

But thanks for reminding :)

@zaguiini
Copy link

@zaguiini Hm, I am not sure if this is a good place for such discussion. Your example though doesn't use AbortController correctly. You are not aborting promise but just checking if the signal was raised after your promise resolved. The same behaviour you can achieve with async/await. The way Abort Controller should be used:

const controller = new AbortController();
const signal = controller.signal;
fetch(url, {signal}).then...

But thanks for reminding :)

It's ok. That was just an example :)

@bvaughn
Copy link
Contributor Author

bvaughn commented Jan 29, 2019

You might also be interested in checking out the create-subscription package or this blog post for related techniques.

n8schloss pushed a commit to n8schloss/react that referenced this pull request Jan 31, 2019
* Turned enableHooks feature flag on everywhere
* Removed useHooks feature flag from tests (now that it's on by default)
* Remove useHooks feature flag entirely
@nsoufian
Copy link

nsoufian commented Feb 4, 2019

Finally, hooks will come out.

const [countDays, set] = useState(0);

useEffect(() => {
    setInterval(()=> set(countDays + 1),3600 * 24);
});

Thanks

NMinhNguyen referenced this pull request in enzymejs/react-shallow-renderer Jan 29, 2020
* Turned enableHooks feature flag on everywhere
* Removed useHooks feature flag from tests (now that it's on by default)
* Remove useHooks feature flag entirely
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.