|
284 | 284 | |268| [Is it keys should be globally unique?](#is-it-keys-should-be-globally-unique)| |
285 | 285 | |269| [What is the popular choice for form handling?](#what-is-the-popular-choice-for-form-handling)| |
286 | 286 | |270| [What are the advantages of formik over redux form library?](#what-are-the-advantages-of-formik-over-redux-form-library)| |
| 287 | +|271| [Why do you not required to use inheritance?](#why-do-you-not-required-to-use-inheritance)| |
| 288 | +|272| [Can I use web components in react application?](#can-i-use-web-components-in-react-application)| |
287 | 289 |
|
288 | 290 | ## Core React |
289 | 291 |
|
|
4500 | 4502 | Below are the main reasons to recommend formik over redux form library |
4501 | 4503 | 1. The form state is inherently short-term and local, so tracking it in Redux (or any kind of Flux library) is unnecessary. |
4502 | 4504 | 2. Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE. This way it increases input latency for large apps. |
4503 | | - 3. Redux-Form is 22.5 kB minified gzipped whereas Formik is 12.7 kB |
| 4505 | + 3. Redux-Form is 22.5 kB minified gzipped whereas Formik is 12.7 kB |
| 4506 | +
|
| 4507 | +271. ### Why do you not required to use inheritance? |
| 4508 | + In React, it is recommend using composition instead of inheritance to reuse code between components. Both Props and composition give you all the flexibility you need to customize a component’s look and behavior in an explicit and safe way. |
| 4509 | + Whereas, If you want to reuse non-UI functionality between components, it is suggested to extracting it into a separate JavaScript module. Later components import it and use that function, object, or a class, without extending it. |
| 4510 | +272. ### Can I use web components in react application? |
| 4511 | + Yes, you can user web components in a react application. Even though many developers won't use this combination, it may require especially if you are using third-party UI components that are written using Web Components. For example, let us use Vaadin date picker web component as below, |
| 4512 | + ```javascript |
| 4513 | + import React, { Component } from 'react'; |
| 4514 | + import './App.css'; |
| 4515 | + import '@vaadin/vaadin-date-picker'; |
| 4516 | + class App extends Component { |
| 4517 | + render() { |
| 4518 | + return ( |
| 4519 | + <div className="App"> |
| 4520 | + <vaadin-date-picker label="When were you born?"></vaadin-date-picker> |
| 4521 | + </div> |
| 4522 | + ); |
| 4523 | + } |
| 4524 | + } |
| 4525 | + export default App; |
| 4526 | + ``` |
0 commit comments