Back to articles
ReactJS SOLID Principle ~ISP (Interface Segregation Principle)~

ReactJS SOLID Principle ~ISP (Interface Segregation Principle)~

via Dev.to ReactOgasawara Kakeru

In React, the interface(props defined as TypeScript) should have only types that are used in the component. For example: import React , { VFC } from " react " ; type PostType = { title : string ; author : { name : string ; age : number ; }; createdAt : Date ; }; export const Post = ({ post }: { post : PostType }) => { return ( < div > < PostTitle post = { post } /> < span > author: { post . author . name } </ span > < PostDate post = { post } /> </ div > ); }; type Props = { post : PostType ; }; export const PostTitle : VFC < Props > = ({ post }) => { return < h1 > { post . title } </ h1 >; }; type DateProps = { post : PostType ; }; export const PostDate : VFC < DateProps > = ({ post }) => { return < time > { post . createdAt } </ time >; }; The Post component has the Posttitle component and the PostDate component. One shows title , the other shows post date . This breaks the ISP. The Posttitle component depends on the post: PostType property. But this component actually uses the name

Continue reading on Dev.to React

Opens in a new tab

Read Full Article
2 views

Related Articles