262

July 1st, 2020 × #React#JavaScript#WebDevelopment

Our React Wish List

Wes and Scott discuss things they wish React and its ecosystem had out of the box without additional libraries and tooling.

Wes Bos

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

or
Show Notes Transcript

In this episode of Syntax, Scott and Wes talk about what they wish existed in React!

DevLifts - Sponsor

Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.

Show Notes

React

03:53 - Unmount delay for animation

06:20 - Suspense with SSR released (or not because I think they are shelving it)

09:24 - File based components

  • Like Svelte and Vue
  • This would look like a file with a special scoped <style> tag per page.

11:50 - Prevent Default shortcuts

13:00 - No more useIsoLayoutEffect

  • useLayoutEffect on SSR should just work without a custom hook
  • Simple data fetching strategy based on promises

15:52 - Recommended hooks

  • E.g. "here is the best way to do things"
  • Official list of best practice hooks

18:25 - A good form strategy

  • Bind inputs to state directly without any change handlers
  • Inputs and forms all around need more magic - it's painful

20:43 - Write once deploy everywhere

  • Not likely ever
  • E.g. automatic transformation into react-native (obviously not going to happen)

22:28 - Compile time directives

25:11 - Slots instead of children

  • Allows for things like named slots more explicit than children

JSX

26:44 - Removal of htmlFor, className and all other abominations of html

29:09 - Import Raact from React for JSX to work

32:31 - Better conditional / if statement syntax

33:09 - Fragments by default

  • Just do it for us - the error message already knows

33:54 - Automatic key ids

  • If mapping an object, check for common _id or id

36:36 - Simple scoped CSS built in

37:29 - Short hand for props with same name is prop={prop}

39:00 - Prop interpolation without backticks: name="$first $last"

  • Or just backticks without brackets name=${first} ${last} instead of name={${first} ${last}}

Tooling

39:43 - Story for typescript/prettier/babel

40:11 - Automatic a href client side routing

41:51 - Scaffolding and component generation

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Share