general.md

General React rules

Return to Table of Contents

Return to React

General rules for working with react

Don't use anonymous function in events props

It influence badly on app performance

Instead of

<Button onClick={() => this.props.onAction(this.props.id)} />

Use

  method () {
    this.props.onAction(this.props.id)
  }

  /* ... */

  <Button onClick={this.method} />

Use import * as for styled-components

component.styles.ts

import styled from "styled-components";

export const Wrapper = styled.div`
    display: flex;
  `;

  export const Modal = styled.div`
    width: 240px;
    height: 250px;
  `;
  export const Text=  styled.p`
    font-size: 16px;
  `,
};

component.ts

  import * as Styled from './component.styles.ts';


  /* ... */

  <Styled.Wrapper>
    <Styled.Modal>
      <Styled.Text/>
    </Styled.Modal>
  </Styled.Wrapper>

Always prefer function component

export const User = (props) => <div {...props} />;

Divide complex render function to several functions or move it to another components

Instead of

render () {
  <Component>
    {data.map((d) => <User {...d} />)}
    /* ... */
    /* ... */
    /* ... */
  </Component>
}

Use

render () {
  <Component>
    <UserList users={data.users} />
    <Info currentUser={this.currentUser()} />
  </Component>
}

Update state data with option function

in state file

const onUpdateUser = (value: string, option: string) => {
  setState((s) => ({
    ...s,
    user: {
      ...s.user,
      [option]: value,
    },
  }));
};

in input component

interface IProps {
  option: string;
  value: string;
  onUpdateUser: (value: string, option: string) => void;
}

/* ... */

const onChangeText = (text: string) => {
  props.onUpdateUser(text, props.option);
};