Skip to content

Commit f78b751

Browse files
AimWhyAimWhy
committed
add useCallback
1 parent 981cf59 commit f78b751

File tree

6 files changed

+71
-40
lines changed

6 files changed

+71
-40
lines changed

‎frameworks/keyed/frei-hooks/package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/frei-hooks/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,6 @@
3434
"webpack-cli": "5.0.1"
3535
},
3636
"dependencies": {
37-
"@aimwhy/frei": "^1.0.43"
37+
"@aimwhy/frei": "^1.0.45"
3838
}
3939
}

‎frameworks/keyed/frei-hooks/src/main.jsx

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createRoot, useReducer } from '@aimwhy/frei';
1+
import { createRoot, useReducer, useCallback } from '@aimwhy/frei';
22

33
const random = (max) => Math.round(Math.random() * 1000) % max;
44

@@ -68,20 +68,31 @@ const listReducer = (state, action) => {
6868
}
6969
};
7070

71-
const Row = ({ selected, item, dispatch }) => (
71+
const Row = ({ selected, item, dispatch }) => {
72+
const selectFn = useCallback(
73+
() => dispatch({ type: "SELECT", id: item.id }),
74+
[item.id]
75+
);
76+
const deleteFn = useCallback(
77+
() => dispatch({ type: "REMOVE", id: item.id }),
78+
[item.id]
79+
);
80+
81+
return (
7282
<tr className={selected ? "danger" : ""}>
7383
<td className="col-md-1">{item.id}</td>
7484
<td className="col-md-4">
75-
<a onClick={() => dispatch({ type: 'SELECT', id: item.id })}>{item.label}</a>
85+
<a onClick={selectFn}>{item.label}</a>
7686
</td>
7787
<td className="col-md-1">
78-
<a onClick={() => dispatch({ type: 'REMOVE', id: item.id })}>
88+
<a onClick={deleteFn}>
7989
<span className="glyphicon glyphicon-remove" aria-hidden="true" />
8090
</a>
8191
</td>
8292
<td className="col-md-6" />
8393
</tr>
84-
);
94+
);
95+
}
8596

8697
const Button = ({ id, cb, title }) => (
8798
<div className="col-sm-6 smallpad">
@@ -114,13 +125,18 @@ const Main = () => {
114125

115126
return (<div className="container">
116127
<Jumbotron dispatch={dispatch} />
117-
<table className="table table-hover table-striped test-data">
118-
<tbody>
119-
{data.map(item => (
120-
<Row key={item.id} item={item} selected={selected === item.id} dispatch={dispatch} />
121-
))}
122-
</tbody>
123-
</table>
128+
{
129+
data.length > 0 ?
130+
(<table className="table table-hover table-striped test-data">
131+
<tbody>
132+
{data.map(item => (
133+
<Row key={item.id} item={item} selected={selected === item.id} dispatch={dispatch} />
134+
))}
135+
</tbody>
136+
</table>)
137+
: null
138+
}
139+
124140
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
125141
</div>);
126142
}

‎frameworks/non-keyed/frei-hooks/package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/non-keyed/frei-hooks/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,6 @@
3434
"webpack-cli": "5.0.1"
3535
},
3636
"dependencies": {
37-
"@aimwhy/frei": "^1.0.43"
37+
"@aimwhy/frei": "^1.0.45"
3838
}
3939
}

‎frameworks/non-keyed/frei-hooks/src/main.jsx

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createRoot, useReducer } from '@aimwhy/frei';
1+
import { createRoot, useReducer, useCallback } from '@aimwhy/frei';
22

33
const random = (max) => Math.round(Math.random() * 1000) % max;
44

@@ -68,20 +68,31 @@ const listReducer = (state, action) => {
6868
}
6969
};
7070

71-
const Row = ({ selected, item, dispatch }) => (
71+
const Row = ({ selected, item, dispatch }) => {
72+
const selectFn = useCallback(
73+
() => dispatch({ type: "SELECT", id: item.id }),
74+
[item.id]
75+
);
76+
const deleteFn = useCallback(
77+
() => dispatch({ type: "REMOVE", id: item.id }),
78+
[item.id]
79+
);
80+
81+
return (
7282
<tr className={selected ? "danger" : ""}>
7383
<td className="col-md-1">{item.id}</td>
7484
<td className="col-md-4">
75-
<a onClick={() => dispatch({ type: 'SELECT', id: item.id })}>{item.label}</a>
85+
<a onClick={selectFn}>{item.label}</a>
7686
</td>
7787
<td className="col-md-1">
78-
<a onClick={() => dispatch({ type: 'REMOVE', id: item.id })}>
88+
<a onClick={deleteFn}>
7989
<span className="glyphicon glyphicon-remove" aria-hidden="true" />
8090
</a>
8191
</td>
8292
<td className="col-md-6" />
8393
</tr>
84-
);
94+
);
95+
}
8596

8697
const Button = ({ id, cb, title }) => (
8798
<div className="col-sm-6 smallpad">
@@ -114,13 +125,17 @@ const Main = () => {
114125

115126
return (<div className="container">
116127
<Jumbotron dispatch={dispatch} />
117-
<table className="table table-hover table-striped test-data">
118-
<tbody>
119-
{data.map(item => (
120-
<Row item={item} selected={selected === item.id} dispatch={dispatch} />
121-
))}
122-
</tbody>
123-
</table>
128+
{
129+
data.length > 0 ?
130+
(<table className="table table-hover table-striped test-data">
131+
<tbody>
132+
{data.map(item => (
133+
<Row item={item} selected={selected === item.id} dispatch={dispatch} />
134+
))}
135+
</tbody>
136+
</table>)
137+
: null
138+
}
124139
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
125140
</div>);
126141
}

0 commit comments

Comments
 (0)