Next.jsでURLのパラメーターを取得したいっ！
使ってるNext.jsのバージョンは14系(App Router)です。 やりたいことの内容としては下記のようなURLの場合の?nanika=1の値を取りたいって話ですね。 https://example.com/user?nanika=1 ちょいとググってみた感じだとuseSearchParams…
React
react-test-renderer + react-lazyloadでjestのsnapshotテストをしたいっ！
タイトルにテストをしたい！と書きましたが、実際は元々React17では動いていたんですが、React18にしたら動かなくなったので動かしたいっ！です。 React18はreact-lazyloadを使わなくても、React.lazy() / Suspenseで、似たようなことはできるんですが書き換え…
react-router-domでURLに含まれるidを取得したいっ！
Routerあんまり触ってなかったんですが、pathで指定した値(/archives/11111みたいなやつ)が取れるんですね😀 <Routes> <Route path="/archives/:id" element={<Archive />} /…
Reactでdefault exportではないコンポーネントをlazy importしたいっ！
タイトルの通りですが、 export default function Hoge() { return ( <h1>ほげほげ</h1> ); } 上記のようなコンポーネントを普通にimportすれば import Hoge from './hoge'; で、lazyを使ったと…
ApolloClientのuseLazyQueryでonCompletedが毎回動くようにしたいっ！
useLazyQueryを使うと任意のタイミングで、バシバシQueryを呼び出すことができるようになりますが、以下↓のように書いても思ったように動かなかったのでメモ。 const GET_USER = gql` query GetUser($id: Int!) { user(id: $id) { n…
useReducerでコンポーネントに渡すpropsをすっきりさせたいっ！[React/typescript]
機能追加を続けるとuseStateが乱立というかどんどん増えて行ってしまうので、useReducerでまとめて処理したいと思います。 useState import { useState } from 'react'; const = useState<number>(1); const…
連続して発火するイベントの処理を減らしたいっ！(React)
例えばscrollの位置を保存するような処理を書こうとすると、連続してイベントが発生してしまって処理が無駄に行われる場合があります。 const = useState(0); // heightが変更された時 useEffect(() => { // 保存する save(height); },…
Storybook(CSF3.0)でdefault exportではないコンポーネントを追加したいっ！(React)
サンプルが雑ですが、hoge.tsxにはHogeとFooがあって、Hogeはexport defaultです。 export default Hoge = () => { render <>Hoge</>; } export Foo = () => { rende…
componentDidMount / componentWillUnmount を useEffectで書き換えたいっ！
そもそもjsで書いてたコードをTypescriptにしないと行けないところですが、とりあえずHooksへの書き換えをメモ程度に。 componentDidMount componentDidMount() { console.log('mount!!'); } マウントされた時に何かしたいやつですが…
React(TypeScript)でコンポーネントのtypeを別のコンポーネントで使いたいっ！[ComponentProps]
とあるコンポーネントのPropsで指定しているtypeを使いまわしたい時にComponentPropsを使うのを忘れそうなのでメモ。 const Hoge: React.FC<{ id: number }> = ({ id }) => { return <>{id}&l…
useEffectのよくやるパターンをメモっ！
componentDidMountの置き換え componentDidMount() { getHogeList(); } mount時にデータ取得するようなやつ。 useEffect(() => { getHogeList(); }, []); 二つ目の引数に空のArrayを渡すと最初のre…
ReactでonClickをネストにしたいっ！
やりたいことをコードで書いてみたけど、これ何の為に必要なのかよくわからんなｗ render ( <a onClick={e=>{ console.log('parent!!'); }}> 外側 <span onClick={e=>{ console.log('child…
react-i18nextのuseTranslationをTranslationコンポーネントに書き換えた話
ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。 (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるMyComponentがこちら import React from 'react'…
ReactのWarningをなんとかしたいっ！
Warningが気になったので修正していきます。 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from co…
Reactのonclickに引数を渡したいっ！
普通に引数が無い場合は、 clicked() { console.log('click!!'); } render () { <div> <a onClick={clicked}>リンク</a> </div> } これで、クリックした時にclicked…