groupInfo expandAfterMode 0 groupName ReactJS notes A collection of ReactJS snippets. snippetsTE2 abbreviation ;rest abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rest - empty state object modificationDate 2022-09-15T05:03:01Z plainText state = { } snippetType 4 uuidString A5364607-7BAE-46DA-9D33-FFE6EAB193E7 abbreviation rhoc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rhoc - Higher Order Component modificationDate 2022-09-15T05:03:01Z plainText function | (|) { return class extends Component { constructor(props) { super(props); } render() { return < | {...this.props} />; } }; } snippetType 4 uuidString 50E528CE-87DA-410D-902F-CB2E9E346418 abbreviation rimpc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rimpc - Import PureComponent modificationDate 2022-09-15T05:03:01Z plainText import React, { PureComponent } from 'react'; snippetType 4 uuidString 2953DEA7-FBC6-482C-BBB2-6A490E780F1D abbreviation rimpt abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rimpt - Import PropTypes modificationDate 2022-09-15T05:03:01Z plainText import PropTypes from 'prop-types'; snippetType 4 uuidString 989D9C8A-CCF7-4C2E-B62A-655FE9C58FD8 abbreviation rimr abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rimr - Import React modificationDate 2022-09-15T05:03:01Z plainText import React from 'react'; snippetType 4 uuidString 346363A0-B4B5-43FB-B1A5-F6ED773AC713 abbreviation rdisp abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rdisp - MapDispatchToProps redux function modificationDate 2022-09-15T05:03:01Z plainText function mapDispatchToProps(dispatch) { return { } } snippetType 0 uuidString 40EFD59C-67D5-48D2-9395-DEB3BAECBB87 abbreviation rbnd abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rbnd - binds the this of method inside the constructor modificationDate 2022-09-15T05:03:01Z plainText this.methodName = this.methodName.bind(this) snippetType 4 uuidString CF217B4C-536D-43F4-BF25-789FEEC49524 abbreviation rstate abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rstate - this.state modificationDate 2022-09-15T05:03:01Z plainText this.state snippetType 4 uuidString 3724A38A-FAE0-473B-AC42-0330D42AF251 abbreviation rprops abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rprops - this.props modificationDate 2022-09-15T05:03:01Z plainText this.props. snippetType 4 uuidString C0600022-0A80-4E04-B3A3-15E0A72CF47C abbreviation rssf abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rssf - Functional setState modificationDate 2022-09-15T05:03:01Z plainText this.setState(prevState => { return { | : prevState.| } }); snippetType 4 uuidString 069E5F8C-1FBD-4E0B-895D-9C9F79D133CE abbreviation rsfc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rsfc - Stateless Function Component modificationDate 2022-09-15T05:03:01Z plainText const | = props => { return ( | ); }; export default |; snippetType 4 uuidString 897D9D64-9521-4D9E-8794-80E626B0AC56 abbreviation rrsc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rrsc - stateless component skeleton modificationDate 2022-09-15T05:03:01Z plainText import React from 'react'; const test = () => { return ( <div> </div> ); }; export default test; snippetType 4 uuidString B2466832-CAB6-43C0-B8DA-31FC7FDAA2E6 abbreviation rssf abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rssf - this.setState with function as parameter modificationDate 2022-09-15T05:03:01Z plainText this.setState((state, props) => { return { }}) snippetType 4 uuidString 3DC1EA39-80E8-4467-A656-8D4C12B82EC9 abbreviation rss abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rss - setState modificationDate 2022-09-15T05:03:01Z plainText this.setState({ | : | }); snippetType 4 uuidString 94C0FD9C-869A-4ED2-B543-A9F58882E378 abbreviation rren abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rren - render modificationDate 2022-09-15T05:03:01Z plainText render() { return ( <div> </div> ) } snippetType 4 uuidString 66F17BE6-08A7-44D6-9F54-829B07FE3979 abbreviation rcdc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcdc - componentDidCatch modificationDate 2022-09-15T05:03:01Z plainText componentDidCatch(error, info) { | } snippetType 4 uuidString E231BF26-642D-4106-9C81-9D1E8DBAF29A abbreviation rgdsfp abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rgdsfp - getDerivedStateFromProps modificationDate 2022-09-15T05:03:01Z plainText static getDerivedStateFromProps(nextProps, prevStat) { | } snippetType 4 uuidString A1D87084-5B83-4B38-9EE9-8035683FB37B abbreviation rgsbu abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rgsbu - getSnapshotBeforeUpdate modificationDate 2022-09-15T05:03:01Z plainText getSnapshotBeforeUpdate(prevProps, prevState) { | } snippetType 4 uuidString 15081B34-0986-484C-B65C-22F8B2787DCB abbreviation rcwun abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcwun - componentWillUnmount modificationDate 2022-09-15T05:03:01Z plainText componentWillUnmount() { | } snippetType 4 uuidString 262AA544-0A83-49D8-9814-8B69F9DA105C abbreviation rcwrp abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcwrp - componentWillReceiveProps modificationDate 2022-09-15T05:03:01Z plainText //WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead. componentWillReceiveProps(nextProps) { | } snippetType 4 uuidString 5CDAA01D-FE13-4110-9949-5E46218F1EDC abbreviation rcwu abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcwu - componentWillUpdate modificationDate 2022-09-15T05:03:01Z plainText //WARNING! To be deprecated in React v17. Use componentDidUpdate instead. componentWillUpdate(nextProps, nextState) { | } snippetType 4 uuidString 8E2E5F14-8A3F-4211-8528-64B1168FADE6 abbreviation rcdu abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcdu - componentDidUpdate modificationDate 2022-09-15T05:03:01Z plainText componentDidUpdate(prevProps, prevState) { | } snippetType 4 uuidString FAB5BC41-8AB3-41F4-A8E0-6255D92EE210 abbreviation rscu abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rscu - shouldComponentUpdate modificationDate 2022-09-15T05:03:01Z plainText shouldComponentUpdate(nextProps, nextState) { | } snippetType 4 uuidString BD8F0DF8-CA2D-4971-BA83-7A11795C1B17 abbreviation rcdm abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcdm - componentDidMount modificationDate 2022-09-15T05:03:01Z plainText componentDidMount() { | } snippetType 4 uuidString A3CDC9CE-7251-4A57-9647-7558CED44F06 abbreviation rcwm abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcwm - componentWillMount modificationDate 2022-09-15T05:03:01Z plainText //WARNING! To be deprecated in React v17. Use componentDidMount instead. componentWillMount() { | } snippetType 0 uuidString 7D0BCB46-0F72-4EA2-8A4F-6E0D2DC2E7F0 abbreviation rconc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rconc - class default constructor with props and context modificationDate 2022-09-15T05:03:01Z plainText constructor(props, context) { super(props, context); } snippetType 4 uuidString F9A855FD-49DE-4F88-827C-6C821C0ADBD2 abbreviation rcon abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcon - class default constructor with props modificationDate 2022-09-15T05:03:01Z plainText constructor(params) { } snippetType 4 uuidString 8198813F-5C2A-4AC2-BA96-537335C5FB63 abbreviation rdp abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rdp - empty defaultProps declaration modificationDate 2022-09-15T05:03:01Z plainText test.defaultProps = { }; snippetType 4 uuidString 1596EA14-BFD3-4CB1-BF3C-F81121F8EDA9 abbreviation rpt abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rpt - empty propTypes declaration modificationDate 2022-09-15T05:03:01Z plainText test.propTypes = { }; snippetType 4 uuidString 0A4C7E4C-8728-4554-9D14-3F542432A54E abbreviation rfsc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rfsc - stateless component with flow types skeleton modificationDate 2022-09-15T05:03:01Z plainText // @flow import * as React from 'react'; type Props = { }; export const test = (props: Props) => { return ( <div> </div> ); }; snippetType 4 uuidString 795313A8-CFC2-4794-A493-1E293FC4C34A abbreviation rfsf abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rfsf - stateless named function skeleton with flow types skeleton modificationDate 2022-09-15T05:03:01Z plainText // @flow import * as React from 'react'; type Props = { }; export function test(props: Props) { return ( <div> </div> ); }; snippetType 4 uuidString F9A0A51D-EEAF-425A-91E0-EE069D98E87B abbreviation rfcc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rfcc - class component with flow types skeleton modificationDate 2022-09-15T05:03:01Z plainText // @flow import * as React from 'react'; type Props = { }; type State = { }; export class test extends React.Component<Props, State>{ render() { return ( <div> </div> ); }; }; snippetType 4 uuidString A14A1E14-AE99-4818-8607-292F54DFE8A8 abbreviation rsi abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rsi - stateless component with prop types and implicit return modificationDate 2022-09-15T05:03:01Z plainText import React from 'react'; const test = (props) => ( ); export default test; snippetType 4 uuidString D3D828B7-4F08-4874-BD1D-095D7D2D0FBC abbreviation rsfp abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rsfp - stateless named function with prop types skeleton modificationDate 2022-09-15T05:03:01Z plainText import React from 'react'; import PropTypes from 'prop-types'; test.propTypes = { }; function test(props) { return ( <div> </div> ); } export default test; snippetType 4 uuidString 737622DC-0696-4F90-99A3-9D3E18331273 abbreviation rsf abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rsf - stateless named function skeleton modificationDate 2022-09-15T05:03:01Z plainText import React from 'react'; function test(props) { return ( <div> </div> ); } export default test; snippetType 4 uuidString 48C8638F-3A11-48B5-9FF5-5ED6D6B0C1AF abbreviation rscpm abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rscpm - memoize stateless component with prop types skeleton modificationDate 2022-09-15T05:03:01Z plainText import React, { memo } from 'react'; import PropTypes from 'prop-types'; const test = memo((props) => { return ( <div> </div> ); }); test.propTypes = { }; export default test; snippetType 4 uuidString FB635016-2EEA-4AE0-B2D6-17B28A8B77FB abbreviation rscm abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rscm - memoize stateless component skeleton modificationDate 2022-09-15T05:03:01Z plainText import React, { memo } from 'react'; const test = memo(() => { return ( <div> </div> ); }); export default test; snippetType 4 uuidString 83B3239C-3385-404F-BF82-31DB5278F136 abbreviation rscp abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rscp - stateless component with prop types skeleton modificationDate 2022-09-15T05:03:01Z plainText import React from 'react'; import PropTypes from 'prop-types'; const test = props => { return ( <div> </div> ); }; test.propTypes = { }; export default test; snippetType 4 uuidString 25C75D9D-F59A-4FFB-85A9-08074F5BA305 abbreviation rpc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rpc - class pure component skeleton with prop types after the class modificationDate 2022-09-15T05:03:01Z plainText import React, { PureComponent } from 'react' export default class test extends PureComponent { render() { return ( <div> </div> ) } } snippetType 4 uuidString 7AEAB504-6F44-4D9C-9158-3510B9FDF4A8 abbreviation rwwd abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rwwd - class component without import statements modificationDate 2022-09-15T05:03:01Z plainText class test extends React.Component { constructor(props) { super(props); this.state = {}; } render() { return ( <div> </div> ); } } test.propTypes = { }; export default test; snippetType 4 uuidString D3CACEA6-3A7A-467B-A953-ADBCF3D14075 abbreviation rcfc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcfc - class component skeleton that contains all the lifecycle methods modificationDate 2022-09-15T05:03:01Z plainText import React, { Component } from 'react'; import PropTypes from 'prop-types'; class test extends Component { constructor(props) { super(props); } componentWillMount() { } componentDidMount() { } componentWillReceiveProps(nextProps) { } shouldComponentUpdate(nextProps, nextState) { } componentWillUpdate(nextProps, nextState) { } componentDidUpdate(prevProps, prevState) { } componentWillUnmount() { } render() { return ( <div> </div> ); } } test.propTypes = { }; export default test; snippetType 4 uuidString B7B0A347-1D14-4F9F-B92F-224A9EC9A409 abbreviation rcjc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcjc - class component skeleton without import and default export lines modificationDate 2022-09-15T05:03:01Z plainText class test extends Component { render() { return ( <div> </div> ); } } snippetType 4 uuidString 493A4EBD-52D1-44D2-8D18-BA21652EDF31 abbreviation rccp abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rccp - class component skeleton with prop types after the class modificationDate 2022-09-15T05:03:01Z plainText import React, { Component } from 'react' import PropTypes from 'prop-types' export default class test extends Component { static propTypes = { prop: PropTypes } render() { return ( <div> </div> ) } } snippetType 4 uuidString 04A33E9E-FAC3-4B14-B147-B497398A53E0 abbreviation rrdc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rrdc - class component skeleton with react-redux connect and dispatch modificationDate 2022-09-15T05:03:01Z plainText import React, { Component } from 'react'; import { connect } from 'react-redux'; function mapStateToProps(state) { return { }; } function mapDispatchToProps(dispatch) { return { }; } class test extends Component { render() { return ( <div> </div> ); } } export default connect( mapStateToProps, )(test); snippetType 4 uuidString 53410596-BB7B-4ED2-BDC8-2667CB7F7C70 abbreviation rrc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rrc - class component skeleton with react-redux connect modificationDate 2022-09-15T05:03:01Z plainText import React, { Component } from 'react'; import { connect } from 'react-redux'; function mapStateToProps(state) { return { }; } class test extends Component { render() { return ( <div> </div> ); } } export default connect( mapStateToProps, )(test); snippetType 4 uuidString A30121C3-DA4C-4CDD-8192-5728FFA25770 abbreviation cc abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rcc - Class Component modificationDate 2022-09-15T05:03:01Z plainText import React, { Component } from 'react' export default class test extends Component { render() { return ( <div> </div> ) } } snippetType 4 uuidString 40E21C8B-2E47-4D70-8990-DE563C4749C0 abbreviation rprop abbreviationMode 0 creationDate 2022-09-15T05:03:01Z label rprop - Render Prop modificationDate 2022-09-15T05:03:01Z plainText class | extends Component { state = { | }, render() { return this.props.render({ |: this.state.| }); } } export default |; snippetType 4 uuidString 8F400462-C3C6-4BF6-B977-DCABFBA6011A