redux is 44.3kb minified and 16.2kb minified and gzipped. It’ll take 0.54ms to load on 2G EDGE connection and 324ms to load on emerging 3G.
Sass is supported out of the box with create-react-app
Sass is mostly known, no learning curves
Moving back to plain old CSS is easy
If you use CSS variables in the app-wide CSS file, you don’t have to import the variables file in all the other files
Importing partials seems to be an issue to me at the moment. Do we import partials inside the component stylesheets? In every component?
styled-components can take props
styled-components are contained in the same file. No more opening the styles file to the side. No more creating separate files for every component
will result in simpler folder structure as i won’t have to create a folder for every component just so i could keep the files together. And i wouldn’t have to name the component files inside the folder as index.js either, which makes differentiating between the tabs in code editor a nightmare, i have to hover on every file to see the path and know which component file is that particular index.js is. At any time i have 3-12 index.js files open
1# folder structure with Sass files
2
3components
4├── Icon
5│ ├── Icon.scss
6│ └── index.js
7├── List
8│ ├── index.js
9│ └── List.scss
10├── ListItem
11│ ├── index.js
12│ └── ListItem.scss
13├── NewsItem
14│ ├── index.js
15│ └── NewsItem.scss
16└── Sidebar
17 ├── index.js
18 └── Sidebar.scss
1# folder structure with styled-compnents
2
3components
4├── Icon.js
5├── List.js
6├── ListItem.js
7├── NewsItem.js
8└── Sidebar.js
UPDATE: See folder structure below, saving all components in one folder gets rid of the need to name every compnent fiel as index.js
redux is 7.1kb minified and 2.6kb minified and gzipped. It’ll take 86ms to load on 2G EDGE connection and 52ms to load on emerging 3G.
The size and load time is minimal enough to warrant using it.
Redux separates the state stuff from the components and you end up with multiple files and folders. React Hooks will let you do that in one place
with the useState() hook you can not see the state in the React Developer tools in a way that you wnat.
useState() does not do a shallow merge like setState() does, it wipes out the state that we had before. React recommends saving your state as separate variables so that updating one does not wipe the other. (Or you could write your own mergeState function)
1const mergeState = partialState =>
2setState(prevState => ({
3 ...prevState, // takes new state being sent and merges with previous state
4 ...partialState
5}))
6
7<input onChange={e => mergeState({ text: e.target.value })}
This is the folder structure we’re following at the moment. Instead of creating separate folders for every component, we’re saving both .js and .scss files with the folder component name as file name in one components/ folder.
1components/
2├── Icon.js
3├── Icon.scss
4├── ListItem.js
5├── ListItem.scss
6├── List.js
7├── List.scss
8├── NewsItem.js
9├── NewsItem.scss
10├── Sidebar.js
11└── Sidebar.scss
Read this for the a general recommendation on folder structure