Efficient way to organise UI components

Functional Components and Hooks

Alex Li

1.

Older versions (before October, 2015)

Class component only

2.

0.14.0 (October, 2015)

Functional component was added into React

3.

16.8.0 (February, 2019)

Hooks were added into React

4.

17.0.0 (October, 2020)

Concurrent mode (time slicing, suspense)

 

Functional Components are simple plain javascript functions which return JSX.


 

What is functional component

const Header = (props) => (
  <div>
   <h1>{props.title}</h1>
   <h2>{props.subtitle}</h2>
  </div>
);


<Header title="Title"
    subtitle="Sub title"
/>

Why functional component?

Difference

Class Component

Stateful

Lifecycle methods

Rely on this

Error boundary

Functional Component

Stateful

Lifecycle methods

Rely on this

Error boundary

  • Simple, less code and smaller bundle
  • Stateless and idempotent

Motivations (before having hooks)

Much smaller bundle size

A functional approach to UI

Segregate State Container and Presentation

With Redux

React hooks make fill in the gaps between functional component and class component and even beyond it.

React Hooks!

  • Managing state
  • Managing side effects
  • Caching
  • Managing refs

What are hooks?

Hooks are a set of functions which can only be used by functional components for

Most frequency hooks

useState example

useEffect example

Reuse code

Reusable code pattern should always be concerned

An example

In functional programming, there is a well-known concept named high-order functional. HOC is a similar thing in react. A HOC is usually a:

Reuse logic with HOC

  • A function
  • Argument is a component
  • Returns a new component

HOC Example

  • Hard contract is required between HOC and view component
  • Nested hell

Disadvantages

withErrorState(withAuth(withAdContext(withDeviceSize(withResizeable(withDraggable(...))))))

Render props is a similar pattern with HOC but with some differences:

Reuse logic with render props

  • It is a component not a function
  • View component is composite via children or other props

Render props Example

Custom Hook Example

UI=F(props, H1(param), H2(param),...Hn(param))

The mental model is changed

Do you think virtual DOM fast? 

Memorization

Mutate DOM process

Just like GC technology, Virtual dom technology is aiming to find out a balanced solution between development experience and render performance.  The key to success in react application performance is reduce unnecessary re-rendering

useMemo example

Replace redux with hooks

Q&A

Additional Reading

 

 

 

Made with Slides.com